无法使用jQuery读取CORS请求的响应标头 [英] Cannot read response headers for CORS request with jQuery

问题描述

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

I have a working cross-domain web service call where I get my payload back, but I cannot read the headers in the response. Chrome can show me the headers in the request fine, but they are not available in jQuery's success handler.

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());
    }
});

唯一记录到控制台的是:

The only thing that gets logged to the console is:

Content-Type:application/json; charset = utf-8

Content-Type: application/json; charset=utf-8

以下是Chrome报告的OPTIONS和POST响应标头信息，请注意，我正在尝试通过Acccess-Control-Expose-Headers公开Foo和Authorization:

Here is what Chrome is reporting for the OPTIONS and POST response headers, note that I am attempting to expose Foo and Authorization via Acccess-Control-Expose-Headers:

选项

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

POST

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标头吗?

Can anyone figure out why I can only access the Content-Type header in my success callback?

更新

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

Note I refactored the above to use XMLHttpRequest, the behaviour persists.

推荐答案

您的响应标头中有一个错字:

There is a typo in your response header:

访问控制公开标题:内容类型，Foo，授权

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

访问"中有三个"c".我承认我花了很长时间才注意到.

You have three "c" in "access". I admit it took too long for me to notice too.

虽然我没有Chrome(只有Firefox)，但我尽可能地复制了您的请求，并修复了输入错误，这是这样的:

While I don't have Chrome (only Firefox), I replicated your request as closely as I could and fixing the typo returned this:

Foo:酒吧
授权:custom_access_token = some_token
内容类型:text/html; charset = utf-8

Foo: Bar
Authorization: custom_access_token = some_token
Content-Type: text/html; charset=utf-8

附录

看到另一个答案建议您使用withCredentials，如果出于某些原因这样做，请记住，Access-Control-Allow-Origin必须与您的浏览器可能自行设置的Origin请求标头匹配，并且不能成为通配符.我将其放在此处以避免其他可能的问题.

Addendum

Seeing that another answer is advising you to use withCredentials, if for some reason you did that, remember that Access-Control-Allow-Origin must match the Origin request header that your browser will likely set on its own and it can not be a wildcard. I'm putting this here to avoid another possible issue.

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

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

请参见 Mozilla文档

这篇关于无法使用jQuery读取CORS请求的响应标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！