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

Question

https://github.com/angular/angular-cli#proxy-to-backend 这里是如何对后端进行代理的说明。我一步一步地做了所有事情，但仍然没有代理请求。

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

在 Angular2 项目中，我的文件 proxy.conf.json 的内容如下：

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

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

当我在 commander 里面输入 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

我不得不根据以上答案进行了小幅调整，虽然现在看配置似乎有点奇怪。

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

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

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

Answer 4

On MAC this works for me

Angular 4 运行 localhost: http://localhost:4200/

In package.json

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

In proxy.config.json

其中 our-company-server 将替换为异地 URL

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

Where an angular GET request would be...

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

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

Answer 5

    Please follow below steps

    1 In Angular project create a file called  **proxy.conf.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

Answer 6

对于拥有自定义本地主机域的用户，请参阅this解决方案

{
  "/api/*": {
    "target": "http://backend.site.example",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "http://backend.site.example/api"
    }
  }
}

Answer 7

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

{
"/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
    }
}

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

Answer 8

代理属性 pathRewrite 应添加到 proxy.conf.json。请参阅下面的示例。

{
  "/services/*": {
    "target": "http://yoururl.com",
    "secure": false,
    "changeOrigin" : true,
    "pathRewrite": {
      "^/services" : ""
    }
  }
}

和运行 ng serve --proxy-config proxy.conf.json 肯定有用。

Answer 9

尝试以下操作，大多数情况下是以下操作之一：

添加以下内容：

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

运行

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

Answer 10

我真的不知道为什么，但在 angular 11 中，唯一对我有用的解决方案是以下 proxy.conf.json（没有任何其他参数）：

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

此外，在 angular 11 中，您可以选择在 angular.json 中设置正确的代理配置，而无需将其设置为 npm commnand 的参数：

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "angular-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

Answer 11

不是问题的真正答案，但请确保您的后端在您期望的位置实际可用。在我的例子中，某些东西使 node.js 后端停止响应请求，我一开始没有注意到这一点并将其归咎于代理。

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

Angular-CLI proxy to backend doesn't work

proxy

angular-cli

angular