Angular 18代理配置问题：Angular 17迁移后proxy.conf.json失效排查

核心原因：构建工具切换导致代理规则变更 #

Angular 18默认采用Vite作为构建和开发服务器，而Angular 17及以前使用的是Webpack Dev Server，两者的代理配置格式不兼容，这是最常见的失效原因。

具体排查与修复步骤 #

1. 确认配置文件的加载方式 #

Angular 18中proxy.conf.json不再被默认识别，需在angular.json中明确指定，同时确保配置适配Vite规则：
修改angular.json内的architect.serve.options节点：

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

2. 调整代理配置适配Vite语法 #

Vite的代理规则与Webpack存在差异，针对你的原有配置，修改为Vite兼容格式：

{
  "/api": {
    "target": "http://127.0.0.1:8000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "rewrite": (path) => path.replace(/^\/api/, '')
  }
}

• 移除路径末尾的*，Vite默认支持前缀匹配
• 添加rewrite规则（如果后端接口不需要/api前缀），保证请求转发后路径正确

3. 查看开发服务器日志 #

启动项目时关注控制台的代理调试日志（因你设置了logLevel: "debug"），确认：

• 代理规则是否被正确加载
• 请求是否被转发到目标地址
• 是否存在路径重写错误或跨域警告

4. 验证请求路径匹配 #

确保前端发起的请求路径为/api/xxx格式（如http://localhost:4200/api/users），非该格式的请求不会触发代理规则。

5. 同步依赖版本 #

若通过自动迁移工具升级项目，可能存在依赖版本不匹配问题，执行以下命令更新相关依赖：

npm update @angular-devkit/build-angular @angular/cli

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