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

Question

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

看看这个：

// 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 开发工具收集。

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

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

而且我没有其他方法（据我所知）访问响应标头，甚至是原始文本。

我做错了什么？

Answer 1

我认为this SO answer 解释了您所看到的。在那个答案中，他们引用了HTML5 Rocks CORS page：

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

• 缓存控制
• 内容-语言
• 内容类型
• 过期
• 最后修改
• 编译指示

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

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