Angular 18+中ng serve代理添加自定义Header失败问题排查

问题根源 #

Angular 18依赖的webpack-dev-server已升级至v5版本，你使用的旧版onProxyReq、on.proxyReq配置语法已不再被支持，这是两种配置均失效的核心原因。

正确配置方式 #

改用webpack-dev-server v5+官方推荐的configure函数来修改代理请求头，配置代码如下：

// proxy.config.js
const proxyConfig = {
  "/api/v1": {
    target: "http://localhost:3000",
    secure: false,
    changeOrigin: true,
    configure: (proxy) => {
      proxy.on("proxyReq", (proxyReq) => {
        proxyReq.setHeader("X-foo", "bar");
      });
    },
  },
};
module.exports = proxyConfig;

额外检查项 #

• 确认代理配置已被加载：要么运行ng serve --proxy-config proxy.config.js启动服务，要么在angular.json的projects.[你的项目名].architect.serve.options中添加"proxyConfig": "proxy.config.js"，这样直接执行ng serve即可自动加载配置。
• 调试回调执行状态：在proxy.on("proxyReq")的回调内添加console.log("代理请求已拦截")，启动服务后观察终端输出，确认逻辑是否被触发。
• 验证请求路由正确性：检查浏览器开发者工具的网络请求，确保请求地址是http://localhost:4200/api/v1/xxx（Angular开发服务器地址），而非直接请求http://localhost:3000——只有走代理的请求才会触发配置逻辑。

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