Geek Answers Handbook

Vue-resource Cross-start response headers are not available.

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

check this:

// 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 a GET request that is called after 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 collected using chrome dev tools.

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

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

and I have no other way (I know) to access the response headers, even the source text.

What I did wrong?

+6
source share
1 answer

I think this SO answer explains what you see. In this answer, they cite 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 have access to other headers, you should use the Access-Control-Expose-Headers header. The value of this header is a comma-separated list of response headers that you want to provide to the client.

So, if you control the api that you are calling, you can open additional headers for the client by setting the Access-Control-Expose-Headers header.

+3
source

More articles:


All Articles