Angular 17（esbuild/vite）代理配置失效问题求助

原因 #

Angular 17 默认采用 Vite 替代 Webpack 作为构建工具，Vite 的代理配置格式与 Webpack 时代的配置不兼容，原 Webpack 风格的proxy.conf.json会被直接忽略。

正确配置方式 #

方式1：使用ESM格式的代理配置文件 #

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

export default {
  '/api': {
    target: 'http://localhost:8080',
    secure: false,
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
};

• 注意：Vite 用rewrite替代了原 Webpack 的pathRewrite，且路径匹配无需添加*，默认采用前缀匹配规则。

2. 在angular.json中指定配置文件：
   找到项目的architect > serve > options节点，添加proxyConfig字段：

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

也可直接通过命令行启动时指定：

ng serve --proxy-config proxy.conf.mjs

方式2：直接在angular.json中内嵌代理配置 #

无需单独创建配置文件，直接在angular.json的serve > options中添加proxy字段：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "proxy": {
      "/api": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true,
        "rewrite": (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

验证 #

启动ng serve后，发送请求http://localhost:4200/api/xxx，该请求会被代理到http://localhost:8080/xxx，检查后端服务是否收到请求即可确认配置生效。

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