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


Angular-CLI proxy to backend doesn't work

https://github.com/angular/angular-cli#proxy-to-backend此处是有关如何进行后端代理的说明。 我一步一步地完成了所有工作，但仍然没有完成请求。

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

在Angular2项目中，我具有以下内容的文件proxy.cons.json：

1
2
3
4
5
6
{
 "/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)

1
2
3
4
5
6
7
8
9
10
  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时，一切正常。 在后端没有什么可找的。

相关讨论

您可以尝试以下一种方法吗？

1
2
3
4
5
6
7
{
 "/api": {
   "target":"http://url.com",
   "secure": false,
   "pathRewrite": {"^/api" :""}
  }
}

这个对我有用，

1
2
3
** 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" ~>""
相关讨论

这接近为我工作。还得加

1
"changeOrigin": true,

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

1
2
3
4
5
6
7
8
9
{
 "/proxy/*": {
 "target":"https://url.com",
 "secure": false,
 "changeOrigin": true,
 "logLevel":"debug",
 "pathRewrite": {"^/proxy" :""}
  }
}
相关讨论

On MAC this works for me

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

In package.json

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

In proxy.config.json

我们的公司服务器将被异地URL取代的地方

1
2
3
4
5
6
7
{
 "/v1": {
   "target":"https://our-company-server.com:7002",
   "secure": false,
   "logLevel":"debug"
  }
}

Where an angular GET request would be...

1
2
3
4
this.http.get('/v1/dashboard/client', options).map...

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

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

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

1
2
3
4
5
6
7
8
9
{
 "/api/*": {
    "target":"https://url.com",
    "secure": false,
    "changeOrigin": true,
    "logLevel":"debug",
    "pathRewrite": {"^/api" :"http://url.com/api"}
  }
}

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

相关讨论

对于具有自定义localhost域的用户，请参考此解决方案

1
2
3
4
5
6
7
8
9
10
{
 "/api/*": {
   "target":"http://backend.site.example",
   "secure": false,
   "changeOrigin": true,
   "pathRewrite": {
     "^/api":"http://backend.site.example/api"
    }
  }
}

对我有用的proxy.config.json文件

1
2
3
4
5
6
7
{
"/api": {
   "target":"http://localhost:3000",
   "secure": false,
   "changeOrigin": true
    }
}

并在package.json中添加" ng serve --proxy-config proxy.config.json"
并运行命令npm start

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    Please follow below steps

    1 In Angular project create a file called  **proxy.cons.json** with content like this:

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

    2 edit package.json file and add below code

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


    3 call your backend api like this

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

    4 run npm start or ng serve --proxy-config proxy.conf.json

尝试以下操作，多数情况下将是以下两种方法之一：

  • 添加以下内容：

    1
    2
    "changeOrigin": true,
    "pathRewrite": {"^/service" :""}

  • 跑

    1
    ng serve --proxy-config proxy.config.json

    • 代理属性pathRewrite应该添加在proxy.conf.json中。
    请参见下面的示例。
    {
    "/services/*": {
    "target":"http://yoururl.com",
    "secure": false,
    "changeOrigin" : true,
    "pathRewrite": {
    "^/services" :""
    }
    }
    }

    并运行ng serve --proxy-config proxy.conf.json
    当然可以。