HttpClient.get('/', {observe: 'response'}); not returning all headers

Question

I am writing an API GET request using HttpClient.get(). I pass in the option to observe the response, and when I access the .keys(), I do not get any other headers besides Content-Type.

Access-Control-Allow-Origin header is set to a wild card (*) and still I can only access the Content-Type header in angular. What am I missing?

The header is correctly being sent to my browser in the networking tab. I also tried explicitly allowing that custom header in Access-Control-Allow-Origin.

Angular App:

this.data.getClubs(1, 10, '', {clubName: 'asc'}, '').subscribe(
      dataJson => {
        console.log(dataJson.headers.keys());
}

getClubs(page: number, count: number, group: any, sorting: any, filter: any) {
    return this.http.get(this.apiUrl + `/club`, {
      params: {
        count: String(count),
        filter: String(filter),
        group: String(group),
        page: String(page),
        sorting: JSON.stringify(sorting)
      },
      headers: this.getHttpOptions().headers,
      observe: 'response'
    });
}

Please view images. The header is set to allow access to the header. https://i.stack.imgur.com/Q6sk6.png https://i.stack.imgur.com/hAVHV.png

Any help would be appreciated!

Possible duplicate of [Read response headers from API response - Angular 5 + TypeScript](https://stackoverflow.com/questions/48184107/read-response-headers-from-api-response-angular-5-typescript) — Vlad274, Apr 06 '19 at 03:20
It the Access-Control-Allow-Origin header is set. This is not a duplicate of that. — After Midnight, Apr 06 '19 at 03:23
The answer to that question refers to a different header `Access-Control-Expose-Headers`, which does not support a wildcard value like you have — Vlad274, Apr 06 '19 at 03:27

score 4 · Accepted Answer · answered Dec 12 '19 at 07:38

This is because you need to add your header name on to access-control-expose-headers parameter in the backend.

Eg if you want to expose a header named 'my-custom-header' then in the backend you need to add this header to access-control-expose-headers parameter like

response.set({
 "my-custom-header": 'custom value',
 "access-control-expose-headers": "my-custom-header"
})

hope this will work

HttpClient.get('/', {observe: 'response'}); not returning all headers

1 Answers1