How to add a custom header in ng serve proxy (Angular 18+)

Question

I am trying to add a custom header to a proxy request when using ng serve in my Angular 18 app. I've tried the following configurations:

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

And this alternative syntax:

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

Neither of these work. The custom X-foo header is not added to the request and I don't see any errors in the console.

What am I doing wrong?

Rens Jaspers · Accepted Answer · 2024-12-18 16:35:01Z

0

In Angular 18 or later, you have to use a different syntax:

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

answered Dec 18, 2024 at 16:35

Rens Jaspers

2,4434 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add a custom header in ng serve proxy (Angular 18+)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related