Vue-resource: Missing response headers

[damir]

Hi all,

I need to pull some data from custom response headers but there are none. All i get is this when inspecting response:

"headers": {
      "Accept": "application/json, text/plain, */*"
    }

response.headers() is also broken, it returns this:

{
  "content-type": "application/json",
  "": ""
}

[ernysans]

Hi @damir .

You need to call the headers in line with console.log(response.request.headers); so you can see all the ones you have available.

"Accept": "application/json, text/plain, */*",
"Authorization": "Basic YXBpOnBhc3N3b3Jk",
"X-Requested-With": "XMLHttpRequest"

Then you can call the the one you need. For example: console.log(response.request.headers.Accept);

application/json, text/plain, */*

[damir]

Hi Erny,

Those are the request headers, same I pasted before when inspected the whole request object. From response (i.e. request.response) i got data, status and statusText but no response headers.

[damir]

I fixed the problem, for CORS requests Access-Control-Expose-Headers must be set both on the server and the client:

Access-Control-Expose-Headers (optional) - The XMLHttpRequest 2 object has a getResponseHeader() method that returns the value of a particular response header. 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.

More at http://www.html5rocks.com/en/tutorials/cors/

[chasewoo]

@damir Thanks for you, your answer is very useful.

[taozhiyuzhuo]

@damir how to solve it

[damir]

Here is the config from Rack::Cors middleware (Ruby) where custom headers are set:

use Rack::Cors do

  allow do
    origins '*'
    resource '*', :headers => :any,
                  :methods => [:get, :post, :options, :put, :patch],
                  :expose  => ['X-total-count', 'X-per-page']
  end
end

And this is how headers look like in a raw response from server:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, PATCH
Access-Control-Allow-Origin:http://localhost:8080
Access-Control-Expose-Headers:X-total-count, X-per-page
Access-Control-Max-Age:1728000
Content-Length:0
Content-Security-Policy:default-src 'self'
Content-Type:application/json
Strict-Transport-Security:max-age=16070400;
Vary:Origin
X-Content-Type-Options:nosniff
X-Frame-Options:deny
X-XSS-Protection:1; mode=block

[Parameshvadivel]

@damir can you please update your answer of header content?