Vue-resource: Unable to see extra headers from response

[mclate]

When trying to access response headers, the only header i can see is Content-Type although server replies with extra ones.

I'm able to get whole response with no issue using http resource:

this.serverRequest().then(
    response => {
        console.log(response.headers)
    },
    error => {}
)

Consider next server response:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Authorization, Content-Type
Access-Control-Allow-Methods:OPTIONS, POST
Access-Control-Allow-Origin:http://localhost:4000
Connection:keep-alive
Content-Length:112
Content-Type:application/json
Date:Sun, 26 Nov 2017 21:50:49 GMT
Server:Cowboy
Via:1.1 vegur
X-Password-Token: 1234567890abcdef
X-Server-Time:1511733049

What is Expected?

Expected to see at least X-Password-Token and X-Server in console log (ideally, one would see all headers returned by server)

What is actually happening?

Seeing only content-type in headers mapping console log

[campbellr]

I just noticed the same issue.

The only headers that I end up seeing in response.headers are Content-Type and Last-Modified.

[steffans]

Please use response.headers.get('X-Password-Token'); to access a Headers Value (https://github.com/pagekit/vue-resource/blob/develop/docs/http.md#example)

[mclate]

Yes, i've tried this one. Getting undefined still.

[mclate]

Any update on this one?

[stgogm]

Having the same issue here. Looks like a browser bug.

[stgogm]

Well, it is a browser issue indeed. Browsers need an access-control-expose-headers header to make them avilable when using the fetch API while performing a CORS request (more here).

In short: you must set your server response with the comma-separated list of headers list you want to expose to your response.

Example: access-control-expose-headers: x-password-token,x-server-time

I strongly recommend you to use all-lower-case as I've had some trouble while using others.

[edamian]

Actually, I do what you wrote above and it didn´t work. (my backend is in spring) what can I do to solve this?

[stgogm]

@edamian You have to make sure the headers are returned by the server in the appropriate format. I've tested this solution extensively with a few apps and it works as expected.

Please take a look at the fetch standard spec to better understand why it might or might not work.

[edamian]

@stgogm you're right, it works.