Angular2如何配置代理以访问三个不同的后端服务？

你的问题核心出在代理规则的匹配顺序和一些配置细节上，Angular的代理是按从上到下的顺序匹配规则的，泛化的规则如果放在前面会覆盖后面的具体规则，这就是你当前配置不生效的原因。下面给你一步步解决：

1. 理解代理匹配逻辑 #

Angular的代理配置会优先匹配最前面的规则，你原来的配置里"/api/*"是泛化规则，会匹配所有以/api开头的请求（包括/api/searchs），导致后面的"/api/searchs"规则永远不会被触发。所以必须把具体路径的规则放在泛化规则前面。

2. 修正后的完整代理配置 #

创建或修改你的proxy.conf.json文件，内容如下：

{
  "/api/searchs": {
    "target": "http://localhost:8081/",
    "secure": false,
    "changeOrigin": true
  },
  "/api/test": {
    "target": "http://localhost:8082/",
    "secure": false,
    "changeOrigin": true
  },
  "/api/*": {
    "target": "http://localhost:8080/",
    "secure": false,
    "changeOrigin": true
  }
}

3. 关键配置项说明 #

• changeOrigin: true：这个参数非常重要，当后端服务器有主机名校验时，它会修改请求头中的Host字段为目标服务器的主机名，避免跨域相关的错误，几乎是多代理场景下的必选项。
• 目标地址必须带协议：一定要写http://localhost:8080/而不是localhost:8080/，否则代理无法正确解析目标地址。
• 规则顺序：把/api/searchs、/api/test这类具体路径的规则放在最前面，最后放/api/*这种泛化规则，确保每个请求都能匹配到对应的后端。

4. 启动项目时指定代理配置 #

确保启动Angular项目时加上代理配置参数，否则你的配置不会生效：

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

验证效果 #

现在前端的请求会被正确代理：

• 请求/api/search → 转发到http://localhost:8080/api/search
• 请求/api/searchs → 转发到http://localhost:8081/api/searchs
• 请求/api/test → 转发到http://localhost:8082/api/test

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