Angular 8 - HttpInterceptor - read response headers

Question

I am missing http headers in a response from my HttpInterceptor. I can get a body but not headers. Please see attached output and my code.

@Injectable()
export class ApiVersionInterceptor implements HttpInterceptor {
    intercept(
        req: import("@angular/common/http").HttpRequest<any>,
        next: import("@angular/common/http").HttpHandler
    ): import("rxjs").Observable<import("@angular/common/http").HttpEvent<any>> {
        return next.handle(req).pipe(
            tap(httpEvent=>{
                // Skip request
                if(httpEvent.type === 0){
                    return;
                }
                console.log("response: ", httpEvent);
            })

        );
    }
}

Musser

Answer 1

Wohoo I fixed my problem.

It is not Angular problem but server problem. I need to add another header:

"access-control-expose-headers": "mintargetapiversion"

Angular ignores custom headers if they are not specified in "access-control-expose-header"

Musser

Answer 2

Use httpEvent.headers.get() method like shown below:

@Injectable()
export class ApiVersionInterceptor implements HttpInterceptor {
    intercept(
        req: import("@angular/common/http").HttpRequest<any>,
        next: import("@angular/common/http").HttpHandler
    ): import("rxjs").Observable<import("@angular/common/http").HttpEvent<any>> {
        return next.handle(req).pipe(
            tap((httpEvent: HttpEvent<any>) =>{
                // Skip request
                if(httpEvent.type === 0){
                    return;
                }           
                console.log("response: ", httpEvent);

                let minTargetApiVersion : string;
                if (httpEvent instanceof HttpResponse) {
                    if(httpEvent.headers.has('mintargetapiversion')) {
                        minTargetApiVersion = httpEvent.headers.get('mintargetapiversion');
                    }
                }
            })

        );
    }
}

Vaticinal

I tried this before but error: Property 'headers' does not exist on type 'HttpEvent<any>' appears. I was unable to resolve this issue. – Musser

I fixed it by tap((httpEvent: any)=>{ , but the IF statement is always false. httpEvent.headers.get('mintargetapiversion') will always return null. – Musser

I was wondering why the http headers weren't listed in that first console log and after adding in your if (httpEvent instanceof HttpResponse) { ..., it works like a charm. This works in combination with the header "access-control-expose-headers" to read non-standard http headers. Thank you! – Baccate

Answer 3

in C# asp.net core add this headers

use Access-Control-Expose-Headers for exposing custom header to javascript

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers C# Asp.Net MiddelWare :

context.Response.Headers.Append("access-control-expose-headers", 
    new Microsoft.Extensions.Primitives.StringValues(["x-app-version"]));

context.Response.Headers.Append("x-app-version", 
    new Microsoft.Extensions.Primitives.StringValues("1.1.1.0"));

Angular Interceptor

export const xAppVersionInterceptor: HttpInterceptorFn = 
(req: HttpRequest<unknown>, next: HttpHandlerFn) => {  
  return next(req).pipe(tap(event => {
    if (event.type === HttpEventType.Response) {
      console.log(req.url, event.headers);
      console.log(event.headers.get("x-app-version"));
    }
  }));
}

Zischke