Angular-CLI 代理到后端不起作用答案

【问题标题】：Angular-CLI proxy to backend doesn't workAngular-CLI 代理到后端不起作用
【发布时间】：2017-02-10 01:32:29
【问题描述】：

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"

当我输入指挥官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 时，一切正常。后端没什么可找的。p>

【问题讨论】：

我想知道一件事，你的工作网址是localhost:8080/hello，那为什么你把它指向localhost:8080/api/hello？你绕过它到你的快递服务器了吗？
在 proxy.cons.json 中我将 localhost:8080 设置为 /api，所以当我指向 /api/hello 时，我猜这意味着我指向 localhost:8080/hello。
新文档链接：github.com/angular/angular-cli/wiki/stories-proxy.
我知道这很奇怪，但角度代理路径区分大小写。所以在 Angular 代理中定义“api”或“Api”是不同的。

标签： angular proxy angular-cli

【解决方案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" ~> ""

【讨论】：

感谢您展示pathRewrite 展示位置。 @elzoy：根据正则表达式重写 URL。有关 Webpack 的 Http-Proxy-Middleware 的更多信息：github.com/chimurai/http-proxy-middleware#options
我已经使用了上面的配置..nut 它仍然不起作用。它显示代理已设置但当我提出请求时它实际上命中localhost:4200/api
在开发中为我工作。如何将其发布到生产环境？
@user2347528，这不适用于生产，仅用于开发目的。当您运行 ng build 时，您应该得到一个包含主 html 文件的小包，您应该从后端提供该文件以显示应用程序。如果应用程序的前端与后端保持分离，那么您将不得不使用 apache 或 nginx 设置反向代理服务器。
如果您使用外部主机而不是本地主机，请修改目标，例如：“target”：{“host”：“url.com”，“protocol”：“http：”，“port ": 80 }，或者对于安全版本：只需将协议更改为 "https:"，并将端口更改为 443。还要注意协议名称末尾有一个 ':'（冒号）。还将 "changeOrigin": true 添加到您的配置中。

【解决方案2】：

这对我来说已经很接近了。也不得不添加

"changeOrigin": true,

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

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

【讨论】：

对我来说也是这样，添加 "changeOrigin": true, 后它起作用了这是我的配置：{ "/api": { "target": "https://url.com, "secure": true, "changeOrigin": true }}
Same - "changeOrigin" 有所不同，因为我试图使用第 3 方远程 API。否则代理配置是相同的。

【解决方案3】：

我不得不根据上面的答案做一个小的调整，虽然现在看配置似乎有点奇怪。

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

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

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

【讨论】：

你好，我也有同样的问题，但是你的方法不行。也许你有什么想法？ stackoverflow.com/questions/44872498/…谢谢
我检查了你的另一个问题 - 有一个疑问 - 为什么 pathrewrite 是这样的？ "^/profile": ""你不应该有目的地/结果路径吗？
非常感谢！ { "/profile/*": { "target": "localhost:8888", "secure": false, "pathRewrite": { "^/profile": "localhost:8888/profile" }, "changeOrigin": true, " logLevel": "调试" } }
这个很奇怪，重新启动idea后又不行。清理了整个缓存。 (((((((
你能把你的sn-p代码贴在这里吗？还是和你之前评论的一样？

【解决方案4】：

在 MAC 上这对我有用

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

在 package.json
中

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

在 proxy.config.json

our-company-server 将被场外 URL

替换

{
  "/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.

【讨论】：

【解决方案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

【讨论】：

proxy.conf.json 不是 proxy.cons.json :) 顺便说一句，这是 ng serve 的问题。这是一些如何不拿起设置

【解决方案6】：

对于那些有自定义 localhost 域的人，请参阅this 解决方案

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

我真的不知道为什么，但是在 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"
    },
...

【讨论】：

添加到angular.json实际上是必要的部分。

【解决方案9】：

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

并运行 ng serve --proxy-config proxy.conf.json 肯定会成功的。

【讨论】：

【解决方案10】：

尝试以下方法，大多数情况下都可以：

添加以下内容：

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

运行

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

【讨论】：

【解决方案11】：

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

【讨论】：