Problem with retrieving headers in angular 6?

Question

Here is my service

executeProcess(): Observable<any> {
    return this._httpClient.post(this.baseUrl + '/api/survey/process/execute', {}, { observe: 'response', responseType: 'text' as 'text' });
}

And in my component I am calling it like this

this._httpService.executeProcess().subscribe(res => {
      console.log(res);
}

And this is my res.headers

{
  "normalizedNames": {},
  "lazyUpdate": null,
  "headers": {}
}

which has a headers object which is empty. In the backend of this api, I am sending a header called location which is being shown in the network tab of Chrome. Everything is working through chrome's network tab, but in angular, I am unable to retrieve this header.

ams · Accepted Answer · 2018-11-15 19:54:42Z

1

Have you tried reading the full response?

HttpClient reading the full response

showConfigResponse() {
  this.configService.getConfigResponse()
    // resp is of type `HttpResponse<Config>`
    .subscribe(resp => {
      // display its headers
      const keys = resp.headers.keys();
      this.headers = keys.map(key =>
        `${key}: ${resp.headers.get(key)}`);

      // access the body directly, which is typed as `Config`.
      this.config = { ... resp.body };
    });
}

EDIT:

Also try to expose your location header with Access-Control-Expose-Headers on your backend. See this link for reference: Using CORS

Access-Control-Expose-Headers (optional) - The XMLHttpRequest 2 object has a getResponseHeader() method that returns the value of a particular response header. During a CORS request, the getResponseHeader() method can only access simple response headers. Simple response headers are defined as follows:

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

If you want clients to be able to access other headers, you have to use the Access-Control-Expose-Headers header. The value of this header is a comma-delimited list of response headers you want to expose to the client.

edited Nov 15, 2018 at 19:54

answered Nov 14, 2018 at 23:09

ams

4495 silver badges11 bronze badges

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

7 Comments

theprogrammer Over a year ago

Unfortunately this doesn't change anything. The weird part is that all headers are being sent(which I can check through network tab of chrome dev tools), but when I try to get headers in angular and print them out, the headers object is empty.

ams Over a year ago

@theprogrammer Are you exposing your header with "access-control-expose-headers" in your backend? Not all headers are allowed to be accessed from the client side. After that you can try againg getting your header with res.headers.get('location') in your component.

theprogrammer Over a year ago

No I am not exposing those, but if I I use a simple fetch(javascript), I can access headers, if I use postman I can see headers, if I look in chrome dev tools' network tab, I can see headers. So I am guessing its my angular code problem somewhere not the backend.

ams Over a year ago

@theprogrammer why don't you just try to expose the header? It doesn't matter if you can access them with postman or if you can see them in chrome. Look at this two links and see for yourself. Read response headers from API response and Using CORS

Anjana Silva Over a year ago

Thanks very much for the tip on exposing headers. If you don't expose the header you are looking for, then you will not get from the angular app. This solved my issues. Many thanks.

|

Collectives™ on Stack Overflow

Problem with retrieving headers in angular 6?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related