使用纯 JavaScript 在跨域请求的 AJAX 请求中包含 Cookie

Posted 2023-03-04

【中文标题】使用纯 JavaScript 在跨域请求的 AJAX 请求中包含 Cookie

【英文标题】：Including Cookies on a AJAX Request for Cross Domain Request Using Pure Javascript

【发布时间】：2014-04-27 10:06:44

【问题描述】：

我正在开发 Analytics 应用程序，我需要一种方法来唯一地识别每个用户设备。为此，我遵循的方法是从服务器端创建一个“cookie”。所有页面点击和跟踪都将使用 Ajax 请求更新到服务器。

我的问题是，我在 xyz.com 中有我的分析。 Abc.com 和 123.com 是安装我的插件（javascript）代码的应用程序。在第一次访问时，我正在创建一个 cookie“sha1”来唯一地识别每个用户/设备，在每个连续的请求中，我需要在服务器中检查 cookie“sha1”是否存在，在此基础上应该采取必要的措施。由于我正在对服务器进行 Ajax 调用，并且由于它是一个跨域请求，因此不会将任何 cookie 添加到请求中。我查看了各种可用于包含请求的 cookie 的选项，例如设置“withCredentials=true”、“crossDomain=true”，但没有成功。

我想要使用纯 Javascript 的解决方案，如果有人帮助我，我将不胜感激。如果推荐任何可行且易于实施的解决方案，我也愿意改变我的方法。

【参考方案1】：

这是一个 XMLHttpRequest() 示例，我已在 Chrome、FF 3.5+、Safari 4+、IE10+ 中成功用于 CORS 和 cookie 凭据。如果这不起作用，则可能是服务器配置或浏览器兼容性有问题。

// GET request
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = 'application/json';
xhr.processData = false;
xhr.contentType = false;
xhr.onload = function() 
    // Successful request
    if (xhr.status == 200) 
        success(xhr.response);
    
;
xhr.onerror = function() 
    // Crossdomain request denied
    if (xhr.status === 0) 
        corsFailed(xhr.response);
    
;
xhr.crossDomain = true;
xhr.withCredentials = true;
xhr.send();

我知道 safari 和 IE10+ 要求用户在其浏览器首选项中允许第三方 cookie。如果不使用自定义标头代替 cookie 并在服务器上设置 Access-Control-Allow-Headers 以包含自定义标头，我认为没有任何方法可以解决此问题。另外我相信您需要 Access-Control-Allow-Headers: "Content-Type"。

要返回到 IE8/9，您需要实现对 XDomainRequest() 的回退，但这些不支持 cookie 凭据。

processData 和 contentType 标志可能仅对 POST 请求是必需的。我在做 POST 时使用 FormData() 对象，而不是 JSON。

【参考方案2】：

js中不能做，需要修改服务器发送的headers：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With, X-Prototype-Version, Content-Type, Origin, Allow
Access-Control-Allow-Methods:POST, GET, OPTIONS
Access-Control-Allow-Origin:http://yourdomain
Access-Control-Max-Age:1728000

如何添加这些标题，取决于您使用哪个软件来提供页面。

【讨论】：

我确实将它们包含在服务器中，但我没有发现 cookie 被添加到 AJAX 请求中

您是否验证了标头是按需要提供的？

是的，我验证了它们，我确实在响应中找到了适当的标题 Access-Control-Allow-Credentials:true Access-Control-Allow-Origin:127.0.0.1:8080 Content-Length:0 Date:Thu , 2014 年 3 月 20 日 14:22:40 GMT 服务器：Apache-Coyote/1.1 Set-Cookie:sha1=kCallLTmJqNIz67uS；过期=星期六，2014 年 4 月 19 日 14:22:40 GMT