无法使用 jQuery 读取 CORS 请求的响应标头答案

【问题标题】：Cannot read response headers for CORS request with jQuery无法使用 jQuery 读取 CORS 请求的响应标头
【发布时间】：2015-10-09 21:19:12
【问题描述】：

我有一个有效的跨域 Web 服务调用，我可以在其中取回我的有效负载，但我无法读取响应中的标头。 Chrome 可以很好地显示请求中的标头，但它们在 jQuery 的成功处理程序中不可用。

var data_obj = { "userName": "myUser", "password": "000000" }

$.ajax({
    type: "POST",
    url: 'https://localhost:8443/AuthService.svc/auth',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(data_obj),
    dataType: "json",
    success: function(data, textStatus, jqXHR) {
        console.log(jqXHR.getAllResponseHeaders());
    }
});

唯一记录到控制台的是：

内容类型：应用程序/json；字符集=utf-8

这是 Chrome 报告的 OPTIONS 和 POST 响应标头，请注意，我试图通过 Acccess-Control-Expose-Headers 公开 Foo 和 Authorization：

选项

Acccess-Control-Expose-Headers:Content-Type, Foo, Authorization
Access-Control-Allow-Headers:Content-Type, Foo, Authorization
Access-Control-Allow-Methods:POST, PUT, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1728000
Content-Length:0
Date:Mon, 20 Jul 2015 16:26:00 GMT
Foo:Bar

发布

Acccess-Control-Expose-Headers:Content-Type, Foo, Authorization
Access-Control-Allow-Headers:Content-Type, Foo, Authorization
Access-Control-Allow-Origin:*
Authorization: custom_access_token = some_token
Content-Length:36
Content-Type:application/json; charset=utf-8
Date:Mon, 20 Jul 2015 16:26:00 GMT
Foo:Bar

谁能弄清楚为什么我只能在成功回调中访问Content-Type 标头？

更新

注意我将上面的代码重构为使用XMLHttpRequest，行为仍然存在。

【问题讨论】：

我的 OPTION 和 POST 响应都包含Access-Control-Allow-Origin:*，如果这就是您的意思。是的，我知道这是不好的做法:)
是的，这是一个 CORS 请求，但为了清楚起见，我修改了我的标题。
Doh - 也修正了这一点。
确认 XMLHttpRequest 的行为相同。
@hyphenbash 我不确定如何在没有预检的情况下执行 CORS 请求...我的理解是浏览器在检测到您正在发出跨域请求时会自动执行预检。

标签： javascript jquery cors

【解决方案1】：

您的回复标头中有错字：

Access-Control-Expose-Headers:Content-Type, Foo, Authorization

“access”中有三个“c”。我承认我也花了很长时间才注意到。

虽然我没有 Chrome（只有 Firefox），但我尽可能地复制了您的请求，并修复了错误返回：

Foo：酒吧
授权：custom_access_token = some_token
内容类型：文本/html；字符集=utf-8

附录

看到另一个答案建议您使用withCredentials，如果由于某种原因您这样做了，请记住Access-Control-Allow-Origin 必须匹配您的浏览器可能会自行设置的Origin 请求标头，它不能成为通配符。我把它放在这里是为了避免另一个可能的问题。

origin 参数指定一个可以访问资源的 URI。浏览器必须强制执行此操作。对于没有凭据的请求，服务器可以指定“*”作为通配符，从而允许任何来源访问资源。

见Mozilla docs

【讨论】：

我回答是因为我认为这是问题所在。否则我不会浪费答案。