Getting response headers from HttpClient post request in Angular?

Question

I'm trying to get the response headers from a post request, but the HttpResponse object doesn't contain the same headers that I can see in the network. What am I doing wrong? I need to access the value of the Apiproxy-Session-Id key and it isn't present in the HttpHeaders.

This is my code to execute the post request and log the full response, where http is an HttpClient object.

this.http.post('http://localhost:8081/user/login', JSON.stringify(requestBody), {observe: 'response'}).subscribe(resp => { console.log(resp); });

This is the response I'm logging.

These are the headers I'm seeing in the network.

I'm new to Angular and very stumped by this. Thanks for your help!

Answer 1

Hey man I was having the same problem here. Since your backend and frontend are on different domains some headers of the response are not exposed by default.

You can try two different approaches:

1. Proxy your requests on Angular

With this the proxy will make your backend think the request came from the sabe domain. See this doc to know how to do it. Keep in mind that with this option all headers will be exposed.

2. Expose the headers you want on your backend server

Since I don't know the language of your backend I can't tell you the step by step to do so, but I'll have to do something like this on the response: response.add("Access-Control-Expose-Headers", "Apiproxy-Session-Id").

Answer 2

Try to add responseType: 'text'

this.http.post('http://localhost:8081/user/login', 
    JSON.stringify(requestBody), {observe: 'response', responseType: 'text'}).subscribe(resp => {
        console.log(resp);
    });