How set proxy headers in proxy.config.json file for angularcli project

Angular-cli uses http-proxy-middleware https://github.com/chimurai/http-proxy-middleware

there is an option called headers that you can use: https://github.com/chimurai/http-proxy-middleware#http-proxy-option

example:

"/api":
  {
    "target": "https://applications.str.coni.com/api",
    "secure": false,
    "logLevel": "debug",
    "headers": {"host":"www.example.org"}
  }

You can modify both request and response headers and request is easy with the code from @AhmedMusallam answer but for response headers you'll need to change file to proxy.config.js and modify proxy config file to look like this:

const PROXY_CONFIG = {
  "/api": {
      "target": "https://applications.str.coni.com/api",
      "secure": false,
      "logLevel": "debug",
      "onProxyRes": function (proxyRes, req, res) {
        proxyRes.headers['Access-Control-Allow-Headers'] = 'Authorization';
      },
    },
};

module.exports = PROXY_CONFIG;

I am using Angular CLI v13 and its uses bypass interceptor for modifying the headers.

sample code of proxy config put it in a file and name it proxy.conf.js (you can choose any suitable name of the file as you like)

const PROXY_CONFIG = {
    "/api/proxy": {
        "target": "http://localhost:80",
        "secure": false,
        "bypass": function (req, res, proxyOptions) {
            if (req.headers.accept.indexOf("html") !== -1) {
                console.log("Skipping proxy for browser request.");
                return "/index.html";
            }
            req.headers["X-Custom-Header"] = "yes"; // adding oe setting header
            res.removeHeader('X-Header-Name'); //removing header
        }
    }
}

module.exports = PROXY_CONFIG;

and then simply run serve command with proxy.

ng serve -proxy-config proxy.conf.js

The way to achieve this slightly changed with Angular 16+ with Vite (instead of webpack).

const setHeader = (proxyReq) => {
  proxyReq.setHeader('Authorization', 'myToken');
};

export default [
{
    context: ['/api'],
    target: `https://localhost}`,
    secure: false,
    changeOrigin: true,
    configure: (proxy) => {
        proxy. On('proxyRes', setHeader);
    }
},