将 angular-cli 与多路径代理匹配一起使用答案

【问题标题】：Use angular-cli with multiple path proxy matching将 angular-cli 与多路径代理匹配一起使用
【发布时间】：2017-06-12 07:47:04
【问题描述】：

如何在 proxy.conf.json 中定义多个代理路径？ github 上的angular-cli proxy documentation 看起来只能有一个路径（/api）：

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

但是当我查看 webpack proxy 或 http-proxy-middleware 文档时，我发现应该可以定义多个路径（/api-v1 和 /api-v2）：

// Multiple entry
proxy: [
  {
    context: ['/api-v1/**', '/api-v2/**'],
    target: 'https://other-server.example.com',
    secure: false
  }
]

但我不明白如何将其放入 proxy.conf.json。

【问题讨论】：

github.com/angular/angular/blob/…

标签： angular angular-cli webpack-dev-server http-proxy-middleware

【解决方案1】：

在您的 proxy.conf.json 中使用以下语法：

[
  {
    "context": ["/api-v1/**", "/api-v2/**"],
    "target": "https://other-server.example.com",
    "secure": false
  }
]

实际的语法如下：

[
    {
        "context": [
            "/api",
            "/other-uri"
        ],
        "target": "http://localhost:8080",
        "secure": false
    }
]

【讨论】：

有效，但是这个语法记录在哪里？
github.com/angular/angular-cli/blob/master/docs/documentation/…

【解决方案2】：

这里记录了多个条目的语法（使用上下文）： https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md#multiple-entries

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

这还要求您将配置从 .json重命名为 .js，并将运行命令指向新文件。 p>

对我来说，上下文语法不太好用（我假设是因为我想使用通配符）。所以我想出了以下解决方案，它允许您生成配置：

module.exports = [
  "/my",
  "/many",
  "/endpoints",
  "/i",
  "/need",
  "/to",
  "/proxy",
  "/folder/*"
].reduce(function (config, src) {
  config[src] = {
    "target": "http://localhost:3000",
    "secure": false
  };
  return config;
}, {});

这为我完成了工作。（请注意，这仍然需要您将您的 proxy.conf.json 重命名为 proxy.conf.js 并编辑您的运行命令以指向重命名的文件）

【讨论】：

【解决方案3】：

截至 2021 年 3 月，答案如下：

在 CLI 配置文件 angular.json 中，添加/修改代理文件：

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

创建一个proxy.conf.js 如：

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]
module.exports = PROXY_CONFIG;

注意它是 .js，而不是 .json。

Official Details

更新，2021-07-08 需要.js 或.json。前者更好，因为它允许// comment。

对于 SSL：

"target" : "https://localhost:3001", 
        "changeOrigin": true,       // solves CORS Error in F12
        "logLevel": "debug",        //"info": prints out in console
        "rejectUnauthorzied": true, // must be false if not specify here
        "secure": false,            // PROD must be "true", but DEV false else "UNABLE_TO_VERIFY_LEAF_SIGNATURE"
        "strictSSL": true,          // must be false if not specify here
        "withCredentials": true     // required for Angular to send in cookie

【讨论】：