1

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.

theprogrammer
  • 1,698
  • 7
  • 28
  • 48

1 Answers1

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.

ams
  • 449
  • 5
  • 10
  • 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. – theprogrammer Nov 15 '18 at 15:13
  • @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. – ams Nov 15 '18 at 17:28
  • 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. – theprogrammer Nov 15 '18 at 19:19
  • @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](https://stackoverflow.com/questions/48184107/read-response-headers-from-api-response-angular-5-typescript?rq=1) and [Using CORS](https://www.html5rocks.com/en/tutorials/cors/) – ams Nov 15 '18 at 19:48
  • Ok, let me try and get back to you. Just to point out, I am able to access this header using javascript fetch api, but cant do the same with angular. So I dont think its the backend issue. In this case, I am lucky that I can change backend to try your solution, but in case I dont have access to backend api, this would not be possible. – theprogrammer Nov 15 '18 at 21:15
  • @theprogrammer Ok good. It's rarely a waste of time trying out a solution, even if it doesn't work, you'll have excluded something. – ams Nov 15 '18 at 23:26
  • 1
    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. – Anjana Silva Dec 02 '19 at 11:43