如何在Angular CLI中配置代理

Question

我创建了一个新的@ angular/cli项目，并在根组件中添加了一个http GET调用。没有使用代理，这工作正常。

export class AppComponent implements OnInit { 
    constructor(private http: Http) {} 

    ngOnInit() { 
    this.http 
     .get('https://dog.ceo/api/breeds/list/all') 
     .map(response => response.json()) 
     .subscribe(data => console.log(data)); 
    } 
} 

当我尝试添加配置为Angular CLI wiki描述的东西出问题了。

我proxy.conf.json文件：

{ 
    "/api": { 
    "target": "https://dog.ceo", 
    "secure": false 
    } 
} 

我改变了URL的组件/api/breeds/list/all。我跑ng serve --proxy-config proxy.conf.json

然后我在我的浏览器控制台中发出内部服务器错误消息。并且在我开始服务的终端中，我收到此消息[HPM] Error occurred while trying to proxy request /api/breeds/list/all from localhost:4200 to https://dog.ceo (EPROTO) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我尝试了其他几个配置选项和多个API。结果是相似的。

的完整代码是可用在GitHub：使用https://github.com/ErikNijland/angular-cli-proxy-test

版本：

• @角/ CLI：1.3.0
• 的NodeJS：V8.1.4

注意：我知道@ angular/cli正在使用Webpack。而后者又使用http-proxy-middleware。

Answer 1

我认为这是因为你问的https格式http的原点。这可以使用代理中的标志来解决。

{ 
    "/api": { 
    "target": "https://dog.ceo", 
    "secure": false, 
    "changeOrigin": true 
    } 
}