Angular-cli: ng serve adding HTTP response headers

Created on 16 Jul 2019 · 3Comments · Source: angular/angular-cli

🚀 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.

Source

ikemtz

Most helpful comment

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

alan-agius4 on 16 Jul 2019

👍3

All 3 comments

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

alan-agius4 on 16 Jul 2019

👍3

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

ikemtz on 2 Aug 2019

🎉1

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._}