Angular代理配置中如何通过正则捕获实现路径重写？

Angular 开发服务器的代理底层基于http-proxy-middleware实现，本身支持正则分组捕获和动态重写逻辑，可以实现和Nginx命名捕获等效的效果，以下是两种常用配置方案：

方案1：JS格式代理配置（推荐，灵活性更高） #

新建proxy.conf.js文件，写入以下内容：

module.exports = {
  '/xxx/api/objects/*/file/*.xml': {
    target: 'http://localhost:4400',
    changeOrigin: true,
    // 开启调试可以查看重写后的路径，调试完成可删除
    logLevel: 'debug',
    pathRewrite: (path) => {
      // 方式1：直接拆分路径取最后一段文件名，逻辑简单
      const fileName = path.split('/').pop();
      return `/${fileName}`;

      // 方式2：正则捕获实现，和Nginx命名捕获逻辑完全对应
      // const reg = /\/xxx\/api\/objects\/([^/]+)\/file\/([^/]+\.xml)/;
      // const match = path.match(reg);
      // return `/${match[2]}`;
    }
  }
}

方案2：JSON格式代理配置 #

新建proxy.conf.json文件，写入以下内容：

{
  "^/xxx/api/objects/([^/]+)/file/([^/]+\\.xml)$": {
    "target": "http://localhost:4400",
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/xxx/api/objects/([^/]+)/file/([^/]+\\.xml)$": "/$2"
    }
  }
}

生效配置 #

修改angular.json中项目的开发服务配置，指定代理文件路径：
在projects.项目名.architect.serve.options下添加：

• JS配置："proxyConfig": "proxy.conf.js"
• JSON配置："proxyConfig": "proxy.conf.json"

修改完成后重启Angular开发服务即可生效。

内容的提问来源于stack exchange，提问作者Anton