vue-resource Headers from the cross-origin response is not fully available.

Question

response.headers() seems to parse the wrong header response when working with CORS.

check this out:

// REQUEST 
OPTIONS /mohsenin/loans HTTP/1.1
Host: mohsenin.app
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://mclient.app
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36     (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Access-Control-Request-Headers: accept, authorization, crossorigin
Accept: */*
Referer: http://mclient.app/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,fa;q=0.6

// RESPONSE
HTTP/1.1 200 OK
Server: nginx/1.9.3 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Allow: GET,HEAD
Cache-Control: no-cache, private
date: Mon, 18 Jan 2016 09:54:44 GMT
access-control-allow-origin: http://mclient.app
Vary: Origin
access-control-allow-credentials: true
access-control-allow-methods: GET, POST, PUT, DELETE
access-control-allow-headers: ACCEPT, AUTHORIZATION, CROSSORIGIN
Content-Encoding: gzip

So far so good, and this is the GET request that is being called after the options:

// REQUEST
GET /mohsenin/loans HTTP/1.1
Host: mohsenin.app
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://mclient.app
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36     (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Authorization: Bearer [..OLDTOKEN..]
crossOrigin: false
Referer: http://mclient.app/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,fa;q=0.6

//RESPONSE
HTTP/1.1 200 OK
Server: nginx/1.9.3 (Ubuntu)
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: no-cache
Date: Mon, 18 Jan 2016 09:54:44 GMT
Authorization: Bearer [..NEWTOKEN..]
Access-Control-Allow-Origin: http://mclient.app
Vary: Origin
Access-Control-Allow-Credentials: true

note: data is gathered by chrome dev tools.

The thing is, when I use the response.headers() in .then promise, it only returns this object:

Object {content-type: "application/json", cache-control: "no-cache", "": ""}

and I have no other way (that I'm aware of) accessing the response headers, even the raw text one.

What did I do wrong?

Answer 1

I think this SO answer explains what you're seeing. In that answer, they quote the HTML5 Rocks CORS page:

During a CORS request, the getResponseHeader() method can only access simple response headers. Simple response headers are defined as follows:

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

If you want clients to be able to access other headers, you have to use the Access-Control-Expose-Headers header. The value of this header is a comma-delimited list of response headers you want to expose to the client.

So, if you control the api you're calling, you can expose additional headers to the client by setting the Access-Control-Expose-Headers header.