vue-resource
vue-resource copied to clipboard
pagekit
Unable to see extra headers from response
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
I just noticed the same issue.
The only headers that I end up seeing in response.headers are Content-Type and Last-Modified.
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)
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.
Actually, I do what you wrote above and it didn´t work. (my backend is in spring) what can I do to solve this?
@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.