如何在Angular CLI中configuration代理

我创build了一个新的@ 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中描述的configuration时，事情就会出错。

我的proxy.conf.json文件：

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

我将组件中的URL更改为/api/breeds/list/all 。 而我运行ng serve --proxy-config proxy.conf.json

然后，我在浏览器控制台中发出内部服务器错误消息。 而在我开始服务的terminal，我得到这个消息[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)

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

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

使用的版本：

• @ angular / cli：1.3.0
• NodeJS：v8.1.4

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

Answer 1

我认为这是因为您问的httpsformshttp的起源。 这可以使用代理中的标志来解决。

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