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

Question

我正在开发Google Analytics（分析）应用程序，并且需要一种唯一标识每个用户设备的方法。 为此，我遵循的方法是从服务器端创建“ 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：“内容类型”。

要回溯到IE8 / 9，您需要实现对XDomainRequest（）的后备，但是那些不支持cookie凭据。

processData和contentType标志仅对于POST请求才是必需的。 我在执行POST而不是JSON时使用FormData（）对象。

Answer 2

这无法在js中完成，您需要修改从服务器发送的标头：

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

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