Get request headers in HttpInterceptor in Angular

Question

I have an Angular app in production. Its http requests are wrapped with environment headers so I would like to get all request headers to extract some useful info.

If I use proxy server in development then the task is simple. I just create proxy.conf.js with the content

const PROXY_CONFIG = {
  '/context.json': {
    'bypass': function (req, res, proxyOptions) {
      const objectToReturn = {
        headers: req.headers
      };
      res.end(JSON.stringify(objectToReturn));
      return true;
    }
  }
}

module.exports = PROXY_CONFIG;

And it returns all headers.

But unfortunately this solution doesn't work in production because proxy is only for development in Angular. So I try to use HttpInterceptor now.

@Injectable()
export class HttpConfigInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('headers in interceptor', req.headers);
    return next.handle(req);
  }
}

But it seems like the headers array is empty.

How can I get all those headers in HttpInterceptor? Is there any other way to get them ?

I'm having exactly the same issue. Did you manage to solve it ? — Paul Lucaciu, Jul 09 '21 at 07:04
@PaulLucaciu In Angular, I didn't find the solution, unfortunately. But I managed to wrap my Angular project into a NodeJS project. I mean I built it using `ng build --prod` and paste the contents of the `dist` directory into the NodeJS project. So I have my Angular UI which is working from the NodeJS project. And in the NodeJS project, you can extract the headers. — Артур Гудиев, Jul 09 '21 at 08:47

score 1 · Accepted Answer · answered May 10 '22 at 17:19

In Angular's headers you can find only those headers which where attached by a dev when composing a request. So they are usually empty or have very few items which devs added.

On the screenshot provided, those are browser specific headers which are added to requests implicitly when the requests go out and cannot be accessed through JS.

However, depending on your need you might be able to access the required info using browser APIs like determining what agent you are running on or similar.

Another option might be an echo API endpoint which would collect all Headers received and return them in the response body although I'm not sure if it's worth it.

score 1 · Answer 2 · answered May 17 '22 at 06:52

It can't be. As what's @Sergey said.

The solution should be what you did on local environment. By add one backend server for your application. then all requests will flow thru your backend server.

 Before: (frontend) --- request ---> other application(s)

 After: (frontend) --- request ---> backend server (proxy) --->  other application(s)

with this solution, You will also got other benefits like, load balancing, or even application's security for CORS mechanism to make your server open service publicly.

Get request headers in HttpInterceptor in Angular

2 Answers2