后端的Angular-CLI代理不起作用

Question

https://github.com/angular/angular-cli#proxy-to-backend这里是一个如何代理后端的指令.我一步一步做了所有事情仍然没有代理请求.

8080 - 我的Express后端4200 - 我的Angular2前端

在Angular2项目中,我的文件proxy.cons.json内容如下:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

在Angular2 package.json中,我将start过程更改为"start": "ng serve --proxy-config proxy.conf.json"

当我输入指挥官内部npm start时,我可以看到Proxy created: /api -> http://localhost:8080.好吧,到目前为止我觉得很好.

我正在尝试发送请求(Angular2)

  constructor(private http: Http) {
    this.getAnswer();
  }

  getAnswer(): any {
    return this.http.get("/api/hello")
      .subscribe(response => {
        console.log(response);
      })
  }

我收到了一个错误http://localhost:4200/api/hello 404 (Not Found).我们可以看到,没有任何代理.为什么？我做错什么了吗？

要清楚.当我手动去http://localhost:8080/hello,一切正常.在后端方面没有什么可以寻找的.

Answer 1

你可以尝试这个:

{
  "/api": {
    "target": "http://url.com",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

这个对我有用,

** NG Live Development Server is running on http://localhost:4200. **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /api  ->  http://ec2-xx-xx-xx-xx.ap-south-1.compute.amazonaws.com
[HPM] Proxy rewrite rule created: "^/api" ~> ""

Answer 2

这对我来说很接近.还得补充一下

"changeOrigin": true,

完整的proxy.conf.json如下所示:

{
  "/proxy/*": {
  "target": "https://url.com",
  "secure": false,
  "changeOrigin": true,
  "logLevel": "debug",
  "pathRewrite": {"^/proxy" : ""}
  }
}

Answer 3

请按照以下步骤操作

1. 在 Angular 项目中创建一个名为proxy.conf.json的文件 ，其内容如下：

    {
        "/api/*": {
          "target": "http://127.0.0.1:8080",
          "secure": false,
          "logLevel": "debug",
          "changeOrigin": true
        }
      }
   

2. 编辑 package.json 文件并在scripts部分中添加以下代码：

   {
     "scripts": {
       "start": "ng serve --proxy-config proxy.conf.json"
     }
   }
   

3. 像这样调用你的后端 api

   this.http.get('/api/v1/people')
       0.map(res => res.json());
   

4. 运行npm start或ng serve --proxy-config proxy.conf.json

Answer 4

我必须根据以上答案进行小调整，尽管现在看配置有些奇怪。

这是我的proxy.conf.json，如下所示：

{
  "/api/*": {
     "target": "https://url.com",
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug",
     "pathRewrite": {"^/api" : "http://url.com/api"}
  }
}

基本上，我完全重写了路径。现在就可以了。

Answer 5

在MAC 上这对我有用

Angular 4 运行本地主机： http://localhost:4200/

在package.json 中

"start": "ng serve --proxy-config proxy.config.json",

在proxy.config.json 中

当我们-公司的服务器将被关闭，现场更换网址

{
  "/v1": {
    "target": "https://our-company-server.com:7002",
    "secure": false,
    "logLevel": "debug"
  }
}

角度GET请求在哪里......

this.http.get('/v1/dashboard/client', options).map...

// options are headers, params, etc...
// then .map the observable in this case.