如何在 ng 服务代理中添加自定义标头（Angular 18+）

Question

在我的 Angular 18 应用程序中使用

ng serve

时，我尝试向代理请求添加自定义标头。我尝试过以下配置：

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

这个替代语法：

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

这些都不起作用。自定义

X-foo

标头未添加到请求中，我在控制台中没有看到任何错误。

我做错了什么？

Answer 1

在 Angular 18 或更高版本中，您必须使用不同的语法：

// 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;