如何在角CLI中配置代理

I created a new @angular/cli project and added one http GET call in the root component. Without using a proxy this works fine.

我创建了一个新的@棱角/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));
  }
}

When I try to add the configure as describe in the Angular CLI wiki things go wrong.

当我尝试按照CLI wiki的角度添加配置时，会出现问题。

My proxy.conf.json file:

我的proxy.conf。json文件:

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

I changed the URL in the component to /api/breeds/list/all. And I ran ng serve --proxy-config proxy.conf.json

我将组件中的URL更改为/api/breed /list/all。我运行了ng service -proxy-config proxy.con .json

Then I'm gertting Internal Server Error message in my browsers console. And in the terminal where I started ng serve I'm getting this message [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)

然后，我在浏览器控制台生成内部服务器错误消息。在我开始使用ng服务的终端，我在尝试代理请求/api/品种/列表/所有来自localhost:4200到https://dog的消息[HPM]发生错误。首席执行官(EPROTO)(https://nodejs.org/api/errors.html errors_common_system_errors)

I have tried several other configuration options and multiple API's. Results are similar.

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

The complete code is available on GitHub: https://github.com/ErikNijland/angular-cli-proxy-test

完整的代码可以在GitHub上找到:https://github.com/ErikNijland/angular-cli-proxy-test。

Versions used:

版本使用:

• @angular/cli: 1.3.0
• 1.3.0 @angular / cli:版本
• NodeJS: v8.1.4
• NodeJS:v8.1.4之前

Note: I understand that @angular/cli is using Webpack. Which in turn is using http-proxy-middleware.

注意:我理解@ angle /cli使用Webpack。它反过来使用http-代理-中间件。

1 个解决方案

#1

I think it is happening because of the origin your are asking https form http. This can be solved using a flag in your proxy.

我认为这是因为你问https形式http的来源。可以使用代理中的标志来解决这个问题。

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