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

Question

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

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

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

Answer 1

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

// 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。