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>
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);
});