Angular2 Http Response missing header key/values

Question

I'm making an http.patch call to a REST API that is successful (Status 200) but not all the response headers key/values are being returned. I'm interested in the ETag key/value.

Here is a code snippet:

let etag:number = 0;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('If-Match', String(etag));
this.http.patch(
    'http://example.com:9002/api/myresource/',
     JSON.stringify(dto),
     {headers: headers}
)   
.subscribe(
    (response:Response) => {
        let headers:Headers = response.headers;
        let etag:String = headers.get('ETag');
        console.log(etag);
    }
);

When making the same call with a REST Client (Postman), the response header contains:

Content-Type: application/hal+json;charset=UTF-8
Date: Mon, 01 Feb 2016 05:21:09 GMT
ETag: "1"
Last-Modified: Mon, 01 Feb 2016 05:15:32 GMT
Server: Apache-Coyote/1.1
Transfer-Encoding: chunked
X-Application-Context: application:dev:9002

Is the missing response header key/values a bug? Can the issue be resolved with configuration?

Steve S · Accepted Answer · 2016-05-18 17:57:53Z

8

This isn't an Angular issue, rather a CORS one. By definition, CORS will only return six "simple" headers: Cache-Control, Content-Language, Content-Type, Expires, Last-Modified and Pragma.

That's why you see the full set when using a REST client such as Postman, yet when calling from your Angular client, you'll only see the set limited by CORS.

To solve this, you'll need to add an Access-Control-Expose-Headers header along the following lines:

let headers = new Headers();
headers.append('Access-Control-Expose-Headers', 'etag');

let options = new RequestOptions({ headers: headers });

return this.http.get(uri, options).map(this.extractData).catch(this.catchError);

Note that you may need to augment the server side code to support the required exposed headers.

In my case (C#), I revised the EnableCors call (within WebApiConfig) to include "ETAG" in the list of exposed headers (the fourth parameter of the EnableCorsAttribute function).

answered May 18, 2016 at 17:57

Steve S

62410 silver badges20 bronze badges

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

3 Comments

apostrophedottilde Over a year ago

I am having a similar problem, except that if i look in the Network tab in my browser debugger, I can clearly see the Etag header nd its value in the http response to the api call i made, however if i print the response headers to console, thee are only 5 displayed in the array. Does the browser get ALL headers and then angular filters which ones are available or something? ...because i have tried to add 'ETag header to allowed headers in cors settings in my spring boot api, but it doesnt help.'

Steve S Over a year ago

I think this would probably be better as a separate question, but have you appended "Access-Control-Expose-Headers": "etag" to the request headers?

apostrophedottilde Over a year ago

Ah, sorry, i'll bear that in mind for future questions. Yes, after seeing this suggestion in another question i added this to my request headers in angular. I then got another error saying something along the lines of im not allowed to use that header. I presumed this meant i needed to add it to allowed headers in CORS config in spring boot server app, but apparently thats not it.

Collectives™ on Stack Overflow

Angular2 Http Response missing header key/values

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related