javascript - 使用纯 Javascript 在 AJAX 请求中包含 Cookie 以实现跨域请求

Question

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

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

我想要使用纯 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。我认为如果不使用自定义 header 代替 cookie 并在服务器上设置 Access-Control-Allow-Headers 以包含自定义 header ，就没有任何方法可以解决此问题。我还相信您需要 Access-Control-Allow-Headers: "Content-Type"。

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

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