用于开发和生产的角度代理配置答案

【问题标题】：angular proxy configuration for development and production用于开发和生产的角度代理配置
【发布时间】：2018-08-20 17:49:07
【问题描述】：

当我导入HttpClient调用我自己编写的node.js API时，URL的设置有一些问题。

例如：

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class myComponent implements OnInit {

    constructor(
    private http: HttpClient,
    ) {}

    ngOnInit(): void {
       this.http.get('http://127.0.0.1:3000/getData/theme').subscribe(data => {

       });
    });
}

//angular default port 4200,
//node.js default port 3000,

当我设置this.http.get('/getData/theme') 时，get 将调用http://127.0.0.1:4200，这是错误的。如果我为本地开发设置this.http.get('http://127.0.0.1:3000/getData/theme')，它就可以工作。但是，当ng build设置为实际服务器时，无法正常连接。

控制台：

GET http://127.0.0.1:3000/getData/theme 
net::ERR_CONNECTION_REFUSED

GET http://localhost:3000/structureData/themeData 
net::ERR_CONNECTION_REFUSED

如何设置正确的URL，使其同时满足在线和本地开发状态？

angular-cli server - how to proxy API requests to another server?

我设置了 package.json：

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

和

proxy.conf.json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

它不工作：

this.http.get('/getData/theme')

GET http://localhost:4200/getData/theme 404 (Not Found)

或

this.http.get('/api/getData/theme')

GET http://localhost:4200/api/getData/theme 404 (Not Found)

【问题讨论】：

angular-cli server - how to proxy API requests to another server?的可能重复
查看建议的重复问题。如果您使用的是 cli，您可以使用代理配置，该配置将路由到您选择的主机（可以配置服务器和端口）。
@Igor 代理配置旨在通过 ng serve 运行开发服务器时代理调用。运行 ng build 后，您负责 Web 服务器及其配置。
它不起作用，我会在我的问题中修改。
"/api" 是一种模式。任何以/api 开头的 URL 都会通过代理进行路由。 /getData 不以 /api 开头。如果你想全部捕获，你可以使用一个空字符串。

标签： angular angular-cli

【解决方案1】：

我认为这是因为您错过了 `changeOrigin' 属性。

我有不同的 proxy.config.json 文件用于本地和生产，它正在工作。我在这里举个例子。

注意：我使用pathRewrite 从网址中删除该字符串。因此，如果我请求 http://localhost:4200/client-api/stores，它会重定向到 https://www.your-web.com/api/stores

proxy-prod.config.json

"/client-api/*": {
    "target": "https://www.your-web.com/api",
    "pathRewrite": { "^/client-api": "" },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }

proxy-local.config.json

"/client-api/*": {
    "target": "http://localhost:22222",
    "pathRewrite": { "^/client-api": "" },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }

在 angular.json 中使用代理配置文件。你也可以在 package.json 中这样做，但我更喜欢这种方式。

angular.json

...
       "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "src/proxy-local.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production",
              "proxyConfig": "src/proxy-prod.conf.json"
            },
          }
        },
...

如果您运行ng serve，应用程序将使用本地代理。使用ng serve --prod 进行生产。

【讨论】：

谢谢@adrisons，你如何为生产部署构建这个？如果我的 ajax(GET) 调用中有 CORS，我该如何替换 url？如何在 proxy.config.json 文件中传递参数？
你好@DavidSagang，这个 proxy.config.json 只在开发中工作，因为 Angular 服务器使用它。当您在浏览器中从与您的应用程序提供的 URL 不同的 URL 接收数据时，就会发生 CORS 错误。修复 CORS 错误的更简单方法是从您的服务器发出 HTTP 调用，并让您的 Web 应用程序从您的服务器请求它。
这是给 ng serve --prod 的问题是关于 ng build

【解决方案2】：

我遇到了同样的问题...为了将我的前端投入生产，我使用 Nginx。如果你有同样的场景，你可以这样做：

location /api {
       rewrite /api/(.*) /$1  break;
       proxy_pass http://exempleApi.com
}

这等于您在开发中使用的 proxy.config.json：

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

【讨论】：

【解决方案3】：

我使用这个 proxy.conf.json

 {
    "/Api/Workflow/Preview/*": {
        "target": "https://subdomain.domain.com/",
        "protocol": "https:",
        "secure": false,
        "changeOrigin": true
    }
}

我相信你必须写这个proxy.conf.json：

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

【讨论】：