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

Question

I'm trying to set proxy headers for angularcli. Here's what I have so far in my proxy.config.json file:
"/api": {
"target": "https://applications.str.coni.com/api",
"secure": false,
"logLevel": "debug"
But I haven't had any luck so far, perhaps I'm missing something (probably in another file). Any suggestions would be much appreciated.

Answer 1

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"}
}

Answer 2

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;

Answer 3

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