jquery - 来自带有 cookie 的平面 HTML 文件的 CORS Ajax 请求

Question

我正在尝试创建一个独立的 HTML 文件，该文件通过 CORS 向 RESTful JSON 服务发出跨域请求。

我的 jQuery ajax 请求:

var query = $.ajax(
{
    type: 'GET',
    url: 'http://localhost:8626/Home/About',
    contentType: 'application/json',
    dataType: 'json',
    success: function (response)
    {
        alert('success');
        alert(query.getAllResponseHeaders());
        alert($.cookie('SessionID'));
    },
    error: function (x, e)
    {
        alert('error ' + e);
    }
});

我在 (ASP MVC3) 服务器端设置了 Access-Control-etc header :

public ActionResult About()
{
    Response.AddHeader("Access-Control-Allow-Origin", "*");

    Response.AddHeader("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE");

    Response.AddHeader("Access-Control-Allow-Headers", "Content-Type");

    Response.SetCookie(new HttpCookie("SessionID", "1234"));

    return Json(new { name = "John" }, JsonRequestBehavior.AllowGet);
}

除了cookie之外，一切都运行良好。我正确获取了响应 JSON 数据。

但我也从服务器发回一个 cookie。它不会在 header 中显示为 Set-Cookie，也不会显示在 cookie 集合中。我已阅读here要在跨域请求中获取cookie，您需要在$.ajax调用中设置以下内容:

xhrFields:
{
    withCredentials: true
},

当我添加这个时，调用不再有效，并出现 JS 错误:

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

显然，它提示我的 Access-Control-Allow-Origin header 是“*”。

由于这是一个平面、独立的 HTML 文件(来自磁盘，而不是来自 HTTP 服务器)，Chrome 会传递一个等于“null”的 Origin header 。我似乎无法覆盖此值 - 当我添加自定义 Origin header 时，Chrome 显然会忽略它。

如果我返回 Access-Control-Allow-Origin = "null"(与请求中的 Origin header 值匹配)，我会收到 JS 错误:

Origin null is not allowed by Access-Control-Allow-Origin.

所以我不知道该怎么办。我无法使用通配符获取 cookie，并且允许“null”也不起作用。

这不可能吗？还是我漏掉了一个步骤？

Answer 1

您的服务器需要允许带有此 header 的凭据。

访问控制允许凭据:true

https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Allow-Credentials