7

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:

enter image description here

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);
  });
6
  • How do you register this interceptor? Commented Aug 4, 2017 at 15:08
  • I edited my post, adding this information Commented Aug 4, 2017 at 15:11
  • What is logged in Angular's response? Commented Aug 4, 2017 at 15:17
  • I added a screenshot of the response Commented Aug 4, 2017 at 16:17
  • 1
    take a look in the HttpHeaders doc. There are a get() and a getAll() methods. angular.io/api/common/http/HttpHeaders Commented Aug 4, 2017 at 17:03

4 Answers 4

5

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks Tim, it drives one crazy the CORS business. For anyone interested on Spring Boot, you have to add your header name to exposedHeaders method on CorsRegistry.
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())
    } );

Comments

3

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

Comments

1

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.