Angular proxy.conf.json配置特定路径与其余路径代理方法

Angular CLI 的代理能力底层基于 http-proxy-middleware 实现，之前的配置不生效，核心是通配符写法不符合库的匹配规则，同时兜底规则的通配符使用错误。

可直接使用的配置 #

1. 简单对象结构（规则较少时用） #

配置时注意更具体的路径规则必须放在兜底规则前面，代理会按从上到下的顺序匹配，命中第一条符合的规则后就不会继续向后匹配。

{
  "/base": {
    "target": "http://localhost:8082",
    "secure": false,
    "loglevel": "debug",
    "changeOrigin": true
  },
  "**": {
    "target": "http://localhost:8081",
    "secure": false,
    "loglevel": "debug",
    "changeOrigin": true
  }
}

配置说明：

• 固定前缀路径直接写 /前缀 即可匹配所有该前缀开头的请求，比如上面的 /base 会命中 /base、/base/user/info 这类路径
• 兜底匹配所有路径必须用双星号 **，单星号 * 只能匹配单级路径，无法覆盖多级路由请求，这也是之前兜底规则不生效的原因之一
• 新增其他固定前缀规则（比如 /api 代理到其他端口）时，直接在兜底规则上方新增对应配置块即可
• 如果需要匹配任意位置包含 base 的路径（比如 /api/base/getDetail 这类base不在路径开头的场景），把对应规则的键改成 **/base/** 即可
• 加上 changeOrigin: true 可以避免后端校验请求Host/Origin头时出现跨域拦截

2. 数组结构（多规则场景推荐） #

如果需要配置3条及以上代理规则，优先用数组结构，匹配优先级完全由数组元素的排列顺序决定，不会出现对象键自动排序导致的匹配逻辑错乱，可控性更强：

[
  {
    "context": ["/base"],
    "target": "http://localhost:8082",
    "secure": false,
    "loglevel": "debug",
    "changeOrigin": true
  },
  {
    "context": ["/api"],
    "target": "http://localhost:8083",
    "secure": false,
    "loglevel": "debug",
    "changeOrigin": true
  },
  {
    "context": ["**"],
    "target": "http://localhost:8081",
    "secure": false,
    "loglevel": "debug",
    "changeOrigin": true
  }
]

这种写法下每个规则用 context 字段声明要匹配的路径列表，最后一条永远放兜底的 ** 规则即可，新增规则只要插在兜底规则前面就行。

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