How to retrieve all request headers via Angular interceptor

Question

We're trying to read/inspect all of the request headers. Currently our application does use an interceptor, but I believe we need to expand up on it.

For example, would reading the request.header.keys()?

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import * as HttpStatusCode from "http-status-codes";
import { throwError } from "rxjs";
import { Observable } from "rxjs/Observable";
import { catchError, tap } from "rxjs/operators";
import { SharedService } from "src/app/core/services/shared.service";
import { LastActiveService } from 'src/app/core/services/last-active.service';

@Injectable()
export class InactiveSessionInterceptor implements HttpInterceptor {
    constructor(
        private readonly shared: SharedService,
        private readonly lastActiveServie: LastActiveService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            tap((event) => {
                this.lastActiveServie.lastActive = Date.now();
                console.log(event);
                console.log(`req.url ==> ${req.url}`);             
                console.log('REQUEST HEADERS: ', req.headers.keys());                  
            }),
            catchError(this.handleInactiveSession),
        );
    }

    private readonly handleInactiveSession = (response: HttpErrorResponse): Observable<never> => {
        if (
            response.error != undefined &&
            response.error.Message != undefined &&
            (response.status === HttpStatusCode.BAD_REQUEST || response.status === HttpStatusCode.UNAUTHORIZED) &&
            response.error.Message.includes("Session") &&
            response.error.Message.includes("Expired")
        ) {
            this.shared.logout();
        }

        return throwError(response);
    };
}

For example, this search Api request has tons of request headers in the Chrome Network tab, but here's all I get in the code:

And in Chrome Network tab:

Can you be more specific in your goals in implementing an expanded use of the interceptor? What do you want it to do that it isn't already doing in the code you posted? — cklimowski, Jun 01 '22 at 18:28
What do you want to do with those headers anyway? Many headers are set by the browser itself so they won’t show up btw. — MikeOne, Jun 01 '22 at 19:11
Okay that makes sense. So the dev is doing something with Keycloak and setting an Auth Token at some point. In the meantime, he's looking to read all request headers avail. I'll try and get a clearer explanation. thank you — bob.mazzo, Jun 01 '22 at 20:14

score 3 · Answer 1 · answered Jun 01 '22 at 22:31

Access to headers in market standard browsers is controlled by CORS policies. This answer will help understand it, this is a server side config.

Once CORS's Access-Control-Allow-Headers is setup, you can use an angular HttpInterceptor to collect related headers.

This blog has a tutorial on how to intercept requests and manipulate headers.

The gist of it:

@Injectable()
export class YourInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const yourHeaderKeys = req.headers.keys()
        // do something
        
        return next.handle(req);
    }
}

score 1 · Answer 2 · answered Jun 01 '22 at 18:31

1

u definitely can inspect the headers params this way:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const {headers} = req;
// now do as u wish with headers
}

answered Jun 01 '22 at 18:31

gil

2,388
1
21
29

How to retrieve all request headers via Angular interceptor

2 Answers2