ng serve adding HTTP response headers

[ikemtz]

🚀 Feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

A clear and concise description of the problem or missing capability...

First, I'm a huge fan of the CLI. The proxy.conf.json feature in "ng serve" has saved me many hours of work dealing with CORS related issues. However, it would be nice to be able to add a predefined collection of HTTP headers to the proxied responses. In my particular instance, it would allow me to cache my dev server responses while I'm working. I imagine that it would speed up development for many.

Describe the solution you'd like

If you have a solution in mind, please describe it.

I know that the WebPack dev server allows for this:
https://webpack.js.org/configuration/dev-server/#devserverheaders-

I'm not sure how this is translated to the proxy.conf.json file, but I can visualize it would look something like this:

{
"/employeesWebApi": {
"target": "https://xxxxxxxx.azurewebsites.net",
"secure": true,
"pathRewrite": {
"^/employeesWebApi": ""
},
"changeOrigin": true,
"headers":{
"Cache-Control" : "public, max-age=31536000"
}
}
}

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

Hot module reloading would be an alternative but I haven't been able to get this to work with NGRX, Angular 8 and the CLI.

[alan-agius4]

Hi, this should already be possible using the http-proxy event hooks.

You need to use a JS version of the proxy.config instead of the JSON.

proxy.config.js

module.exports = {
    "/api/*": {
        changeOrigin: true,
        // ... other options
        onProxyRes: (proxyRes, req, res) => {
           proxyRes.headers['x-added'] = 'foobar'; // add new header to response
        }
    }
};

More info: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md

Nb: don’t forget to update the path of your proxy config in your angular.json

[ikemtz]

@alan-agius4 thanks so much for this!!!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}