如何在 Angular CLI 中配置代理
Posted
技术标签:
【中文标题】如何在 Angular CLI 中配置代理【英文标题】:How to configure a proxy in Angular CLI 【发布时间】:2018-01-23 19:18:01 【问题描述】:我创建了一个新的 @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
然后我在浏览器控制台中显示内部服务器错误消息。在我开始 ng serve 的终端中,我收到了这条消息[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
使用的版本:
@angular/cli: 1.3.0 NodeJS:v8.1.4注意:我知道 @angular/cli 正在使用 Webpack。而后者又使用了 http-proxy-middleware。
【问题讨论】:
EPROTO
闻起来像是协议问题。也许是因为您通过 https 请求但将 secure
设置为 false?协议之间一定存在不匹配的地方。
【参考方案1】:
我认为这是因为您要求 https 形式 http 的来源。这可以使用代理中的标志来解决。
"/api":
"target": "https://dog.ceo",
"secure": false,
"changeOrigin": true
【讨论】:
谢谢!它现在正在工作。我一直认为那个起源只是主人。显然是scheme+host+port...以上是关于如何在 Angular CLI 中配置代理的主要内容,如果未能解决你的问题,请参考以下文章