vue-resource来自跨源响应的标头不完全可用.

Question

在使用CORS时,response.headers()似乎解析了错误的头响应.

看一下这个:

// 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

到目前为止一切顺利,这是在选项后调用的GET请求:

// 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

注意:数据由chrome dev工具收集.

问题是,当我在.then promise中使用response.headers()时,它只返回这个对象:

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

我没有其他方式(我知道)访问响应头,甚至是原始文本.

我做错了什么？

Answer 1

我认为这个答案解释了你所看到的。在该答案中，他们引用了HTML5 Rocks CORS 页面：

在 CORS 请求期间，该getResponseHeader()方法只能访问简单的响应标头。简单的响应头定义如下：

• 缓存控制
• 内容语言
• 内容类型
• 过期
• 上一次更改
• 杂注

如果您希望客户端能够访问其他标头，则必须使用该Access-Control-Expose-Headers标头。此标头的值是要向客户端公开的响应标头的逗号分隔列表。

因此，如果您控制正在调用的 api，则可以通过设置Access-Control-Expose-Headers标头向客户端公开其他标头。