Angular: add custom HTTP response headers to dev `ng serve`

Question

Is it possible to add a custom HTTP response header to the development server that runs with ng serve? I'd like to add this custom header specially in the response of the main html file request, although it'd fine if it was added for every resource (js files, etc.).

I found these two recent Angular issues:

• https://github.com/angular/angular-cli/issues/15095
• https://github.com/angular/angular-cli/issues/15729

But it's still unclear to me if it's even possible to do it, and if it's possible how to accomplish it.

I have added a proxy.config.js file (referenced from angular.json, section projects -> my-app -> architect -> serve -> options -> proxyConfig) and tried several configs, like the following one, with no luck:

module.exports = {
    "/": {
        'headers': {
            'X-Custom-Foo': 'bar'
        },
        onProxyRes: (proxyRes, req, res) => {
            proxyRes.headers['x-added'] = 'foobar';
        }
    },
    'headers': {
        'X-Custom-Foo': 'bar'
    },
    onProxyRes: (proxyRes, req, res) => {
        proxyRes.headers['x-added'] = 'foobar';
    }
};

Is it possible to do so without having to use a third-party server?

Answer 1

The solution through the proxy configuration didn't work for me (Angular 12). Turns out however that headers can be specified under the options for the @angular-devkit/build-angular:dev-server, like so:

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project:build",
            "headers": {
              "Referrer-Policy": "no-referrer-when-downgrade"
            }
          }

Answer 2

In Angular 11, the above solutions do not work.

Since the context above is Development Server (which is my use case), what I ended up doing was simply start up Chrome by disabling CROS checking.

The benefits of this approach are: (i) avoid Angular or Node changes breaking you (ii) no changes needed to get local dev on different ports to work.

For example, on a Mac:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

Some more information below:

https://alfilatov.com/posts/run-chrome-without-cors/

https://medium.com/@siddhartha.ng/disable-cross-origin-on-chrome-for-localhost-c644b131db19

Answer 3

noga's answer is correct for what the proxy.conf.js needs to look like. In Angular versions 8+ (I'm guessing because of the stabilization of the new builder API and updates to webpack) more needs to be done.

This is all built on webpack-dev-server and http-proxy-middleware, and if you check out the info on webpack's site https://webpack.js.org/configuration/dev-server/#devserverproxy it says:

Note that requests to root won't be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value

Unfortunately, ng serve does not expose this property directly and it is a sibling property of proxy which receives the output of proxy.conf.js. You can either make your own builder or you can dig deep into node_modules > @angular-devkit > build-angular > src > dev-server > index.js and insert webpackDevServerConfig.index = ''; after webpackDevServerConfig is defined.

That works for me running Angular 9.

UPDATE: Angular 11

A commenter noted that this approach doesn't work for Angular 11. Now that I have bit the bullet and upgraded, I have a working solution.

The principle is still the same: the configuration of the dev server needs to have the index property set to the empty string.

After config is defined on line 87 of the same file as above, insert config.devServer.index = "".