设置 CORS 不起作用答案

【问题标题】：Setting up CORS not working设置 CORS 不起作用
【发布时间】：2013-12-02 21:07:27
【问题描述】：

我在服务器上设置了以下标头

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT");
response.addHeader("Access-Control-Allow-Headers","X-Custom-Header");

我想使用 POST 方法访问 Web 服务并向其发送数据，但问题是我与服务器的设置导致了问题

我使用了以下方法

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // XHR for Chrome/Safari/Firefox.
        xhr.open(method, url, true);
    }
    else if (typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // CORS not supported.
        xhr = null;
    }
    return xhr;
}

并基于此对象

url = "http://myurl.do";
var xhr = createCORSRequest('POST', url);
if (!xhr) {
    alert('CORS not supported');
    return;
}
var params = "name=pari123&action=initaction&gameId=slotreel3";
xhr.setRequestHeader('Content-Type', 'application/text/plain'); 
if(xhr.readyState == 4 && xhr.status == 200) 
{
    alert('Tested OK')
    xhr.send(params);
}
else
{
    alert('status not 200 or xhr is not ready');
}

// Response handlers.
xhr.onload = function() {
    var text = xhr.responseText;
    alert('Response from CORS request to ' + url + ': ' + text);
};

xhr.onerror = function() {
    alert('Woops, there was an error making the request.');
};

但它总是提醒一条消息说“状态不是 200 或 xhr 未准备好”我无法继续任何人如果你知道请帮忙！

当我打印 xhr.readyState 时，它的打印值为 1

【问题讨论】：

我正在使用 MAMP 运行文件
您的服务器端代码看起来不一致：您混淆了逗号和冒号。可以吗？
response.addHeader("Access-Control-Allow-Methods","GET, POST, PUT");

标签： javascript cors

【解决方案1】：

if(xhr.readyState == 4 && xhr.status == 200)

此检查必须放在onreadystatechange 事件处理程序中。在实际发送之前，您显然不能有 200 状态代码或“已完成”请求。

你想要的可能是这样的：

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        alert('Tested OK');
        var text = xhr.responseText;
        alert('Response from CORS request to ' + url + ': ' + text);
    }
};
xhr.send(params);

如果您希望 else 案例检查错误，请记住您仍然需要检查 xhr.readyState == 4。您不希望您的错误处理代码为其他 readyStates 运行。

不需要onload 事件 - 当您收到readyState == 4 时，您就知道请求已完成。

【讨论】：

我已经按照您所说的更改编写了代码，但仍然失败

【解决方案2】：

这里可能有几个问题。

我观察到不同的浏览器实现 CORS 的方式不同。我的经验基于 Firefox 和 Google Chrome。例如，我必须在服务器端添加一个特殊的标头，以便 Firefox 像 Google Chrome 那样使用一个连接发出预检（OPTIONS）请求和实际请求（GET、PUT 等）。您必须在服务器端添加：

response.addHeader("Keep-Alive", "timeout=2, max=100");
response.addHeader("Connection", "Keep-Alive");

我还注意到某些浏览器不喜欢 CORS 标头中的通配符（“*”）。该行的解决方法

response.addHeader("Access-Control-Allow-Origin", "*");

将返回请求的来源，而不是通配符。

但是，也可能存在其他问题，我们需要更多详细信息。例如，当服务器托管在同一域上时，请求是否有效（即问题可能与 CORS 无关）。你用的是什么服务器？

【讨论】：

【解决方案3】：

xhr.send(); 需要在调用xhr.open(); 之后不是吗？状态 1 表示请求尚未发送，除非您实际发送请求，否则它永远不会到达状态 4..

【讨论】：