How to get custom response headers in Angular without use of HttpIntercepter

Question

I'm not using HttpIntercepter in my Angular project and I want to retrieve some custom Response Headers in case of error. I tried { observe: 'response' } in my POST API call:

post(url, data = ''): Observable<any> {
  url = this.baseApiUrl + url;
  const headers = this.createHttpHeaders();
  const body = JSON.stringify(data);
  return this.http.post(url, body, {headers: headers, observe: 'response'}).pipe(catchError(HttpClientHelper.handleError));
}

but I'm receiving only 4 headers:

error.headers.keys().map( (key) => console.log(key + ':' + error.headers.get(key)));

returns

cache-control: no-cache, no-store, max-age=0, must-revalidate content-length: 0 expires: 0 pragma: no-cache

But, custom response headers with prefix x- are not returned. Is there any configuration to retrive custom response headers?

Check in chrome inspect network tab, for this request are you really getting the header. Also if possible add screenshot from network tab. — Plochie, Dec 30 '19 at 05:41
Yes. I'm receiving those headers in *Headers* tab of *Network* panel. — Gourav Pokharkar, Dec 30 '19 at 05:43
Does this answer your question? [Read response headers from API response - Angular 5 + TypeScript](https://stackoverflow.com/questions/48184107/read-response-headers-from-api-response-angular-5-typescript) — Madhu Bhat, Dec 30 '19 at 08:10
No. Actually, I have tried the same thing, but it is giving me `undefined`. — Gourav Pokharkar, Dec 30 '19 at 10:46

score 5 · Answer 1 · answered Dec 30 '19 at 06:44

You might have not exposed this header while sending response. Your server needs to send Access-Control-Expose-Headers header, so that your custom header is exposed to client.

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

In spring boot response,

@GetMapping("/endpoint")
public ResponseEntity<Object> someEndpoint() {

    HttpHeaders headers = new HttpHeaders();
    headers.add("x-some-header", "some_header_value");
    headers.add("Access-Control-Expose-Headers", "x-some-header"); // set this to expose custom header
    return ResponseEntity.ok()
               .headers(headers)
               .body(responseBody);

}

How to get custom response headers in Angular without use of HttpIntercepter

1 Answers1