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

Posted

技术标签:

【中文标题】来自带有 cookie 的平面 HTML 文件的 CORS Ajax 请求【英文标题】:CORS Ajax request from a flat HTML file with cookies 【发布时间】:2012-06-23 07:52:50 【问题描述】:

我正在尝试制作一个独立的 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 标头:

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。它没有在标题中显示为 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 标头为“*”感到不满。

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

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

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

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

这不可能吗?还是我错过了一步?

【问题讨论】:

【参考方案1】:

尝试将您的页面放在现场并通过网络访问它(您可以将其安装到本地网络服务器中)。

如果您只想在 Chrome 上测试它 - 有一个名为 --disable-web-security 的 Chrome 启动标志。

此链接是关于如何使用参数启动 Chrome: http://www.chromium.org/developers/how-tos/run-chromium-with-flags.

【讨论】:

【参考方案2】:

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

访问控制允许凭据:true

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

【讨论】:

以上是关于来自带有 cookie 的平面 HTML 文件的 CORS Ajax 请求的主要内容,如果未能解决你的问题,请参考以下文章

使用 Redux 添加更多数据时,带有分页结果的平面列表会导致重新渲染

如何使用来自 IHttpClientFactory 的 HttpClient 将 cookie 添加到请求中

来自平面文件的 GPFdist 插入会在插入时引发错误“用于编码“UTF8”的字节序列无效:0x00”

如何通过带有 cookie 身份验证的 Javascript 获取 JSON 数据?

html 带有CORS和Cookies的Swagger-UI

html 在joomla中添加带有php的js cookies