Angular 14升级后proxy.config.json代理失效求助

一、核对代理配置文件格式 #

Angular 14 对代理配置的语法校验更严格，proxy.config.json 必须包含核心配置字段，示例正确配置如下：

{
  "/api/*": {
    "target": "http://你的后端服务域名/端口",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }
}

• 若后端接口本身带 /api 前缀，需修改 pathRewrite 为 "^/api": "/api" 或直接移除该字段。

二、验证 angular.json 代理路径配置 #

检查 angular.json 中 serve 节点的 proxyConfig 路径是否正确，避免相对路径错误：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "你的项目名称:build",
      "proxyConfig": "./proxy.config.json"
    }
  }
}

• 路径需与代理文件实际位置匹配，根目录下用 ./proxy.config.json，子目录需调整为对应相对路径。

三、确认代理加载状态与依赖版本 #

• 执行启动命令后，查看控制台日志是否输出 Proxy created for /api/* to http://你的后端地址，无此输出说明代理配置未被正确加载。
• 检查 package.json 中 @angular-devkit/build-angular 版本，需与 Angular 14 主版本匹配（如 ~14.2.x），版本不兼容会导致代理失效。

四、清除缓存并验证请求细节 #

• 强制刷新浏览器（Ctrl+Shift+R）清除旧缓存，避免缓存的请求路径未触发代理。
• 打开浏览器开发者工具 Network 面板，查看请求的 Request URL 与请求头：若仍指向 localhost:4200，且无 X-Forwarded-For 等代理头，说明代理未生效。

五、尝试切换代理配置文件格式 #

Angular 14 对 JS 格式的代理配置支持更灵活，可将 proxy.config.json 改为 proxy.config.js，示例：

module.exports = [
  {
    context: ['/api'],
    target: 'http://你的后端服务地址',
    secure: false,
    changeOrigin: true,
    pathRewrite: { '^/api': '' }
  }
];

启动命令同步改为 ng serve --verbose --proxy-config proxy.config.js。

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