Search code examples
angularserver-side-renderingangular-universalangular11

Is there any way of removing header from SSR page serverApp-state before it is inserted in HTLM using Angular?


I need to remove specific header (Date) from the Angular Universal SSR page, so that final HTML won't have this value in file. Considering that I cannot remove this header from API server response, is there any way to achieve this using Angular?

Here is the example of serverApp-state script tag, inserted on page, with that header:

<script id="serverApp-state" type="application/json">
...
&q;headers&q;:{&q;date&q;:[&q;Fri, 05 Mar 2021 12:44:26 GMT&q;],&q;content-type&q;:[&q;application/json; charset=utf-8&q;],&q;content-length&q;:[&q;2933&q;],&q;connection&q;:[&q;keep-alive&q;],&q;server&q;:[&q;nginx/1.18.0&q;],&q;vary&q;:[&q;origin,accept-encoding&q;],&q;cache-control&q;:[&q;no-cache&q;],&q;accept-ranges&q;:[&q;bytes&q;]}
...
</script>

Solution

  • If you use the default TransferHttpCacheModule, this module will register an interceptor that will cache xhr responses, including headers, in the transfer state (see interceptor's code)

    So, if you do not want these headers, here are a few options

    Option #1

    you can write your own interceptor, based on the default one, but do not cache headers. Once this is done, you just need to provide your interceptor in your app module providers

    providers:[
        //...,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MyOwnTokenInterceptor,
          multi: true
        }]
    

    Option #2

    Use BEFORE_APP_SERIALIZED token so that you can modify the DOM document before it it serialised.

    Option #3

    In your server.ts file, change the default routing so that you can modify the html string before sending it

      // All regular routes use the Universal engine
      server.get('*', (req, res) => {
        res.render(indexHtml, { req, res, providers: [/*....*/] },
          (err: Error, html: string) => {
            
            if(!html)
            {
              res.status(500);
            }
            else
            {
                //Modify html here to remove the headers
            }
          res.send(html || err.message);
        });