Intercepting HTTP Response headers with Angular 4.3's HttpInterceptor

Question

This is how I send my HTTP request:

return this.http.get(url, { observe: 'response' })

I would like to read the HTTP headers of a HttpResponse in my HttpInterceptor:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request)
            .do(event => {
                if (event instanceof HttpResponse) {
                    this.logger.logDebug(event); // Headers are missing here
                }
            })
            .catch((err: HttpErrorResponse) => {
            // Do stuff
    }
}

The interceptor is provided like this in my app.module.ts:

{ provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true }

The event seems to have no headers, and even in the Chrome Dev Console I cannot see any headers:

However, when using Postman, I can see the headers in the response (as expected)

Connection →keep-alive
Content-Length →14766
Content-Type →application/json
Date →Fri, 04 Aug 2017 14:50:46 GMT
Server →WildFly/10
X-Powered-By →Undertow/1

How can I reveal these headers in Angular ?

The official docs for HTTP says to get the headers like this:

http
  .get<MyJsonData>('/data.json', {observe: 'response'})
  .subscribe(resp => {
    // Here, resp is of type HttpResponse<MyJsonData>.
    // You can inspect its headers:
    console.log(resp.headers.get('X-Custom-Header'));
    // And access the body directly, which is typed as MyJsonData as requested.
    console.log(resp.body.someField);
  });

Answer 1

I found the answer. It was (of course) a CORS Problem. I am using a CORS Filter and I needed to explicitely expose my custom header. I hope this can help others eventually.

Answer 2

Looks like a server-side CORS filter configuration.

By default, only the 6 simple response headers are exposed:

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.

Use Access-Control-Expose-Headers to expose the headers.

Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

Answer 3

To see the headers, access the 'headers' within the response. The headers are lazily evaluated it seems, thus they are not visible. I suppose that the headers get evaluated only when you explicitly ask for them using resp.headers.get. However, you can get the list of headers in the response using res.headers.keys(). Eg.

yourFunction.subscribe((res:HttpResponse<any>)=>{console.log('response from server:',res);
      console.log('response headers',res.headers.keys())
    } );

Answer 4

That's not related to Angular. The problem is CORS limits headers by default and you do not see "X-Custom-Header" header when call CORS requests. So, adjust server to let it send X-Custom-Header.

There are TWO different headers that need to be added:

1. Access-Control-Allow-Headers
2. Access-Control-Expose-Headers

Access-Control-Allow-Headers must be provided in response of OPTIONS request (pre-flight).

Access-Control-Expose-Headers must be provided in response to the actual (POST/GET) request.

Access-Control-Expose-Headers: X-Custom-Header