包括cookie的AJAX请求跨域请求使用纯Javascript

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。我不认为有任何方法可以解决这个问题，如果不使用自定义报头来代替cookie，并在服务器上设置Access-Control-Allow-Headers来包含自定义报头。另外，我相信你需要Access-Control-Allow-Headers: "Content-Type"。

回到IE8/9，你需要实现一个回退到XDomainRequest()，但是那些不支持cookie凭据。

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

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

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