Javascript CORS - 不存在 'Access-Control-Allow-Origin' header

Question

我一直在使用 CORS 并遇到了以下问题。客户端抱怨 'Access-Control-Allow-Origin' header 不存在，而 它们存在 ，并且 客户端发出实际的 POST 请求 和 收到 200。

function initializeXMLHttpRequest(url) {  //the code that initialize the xhr
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.withCredentials = true;
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

    //set headers
    for (var key in headers) {
        if (headers.hasOwnProperty(key)) {  //filter out inherited properties
            xhr.setRequestHeader(key,headers[key]);
        }
    }

        return xhr;
}

在Chrome

chrome 控制台日志

Chrome OPTIONS 请求

ChromePOST请求

在 Firefox 中

Firefox 控制台日志

Firefox 选项请求

Firefox POST 请求

Answer 1

Access-Control-Allow-Origin 的值 null 不行，它必须是 来源域或 * 以允许任何来源 .

更多详情，refer to MDN。

Answer 2

简而言之：访问控制 headers（例如 Access-Control-Allow-Origin）需要呈现以响应 OPTIONS 和实际 POST。

工作流程：

Client 使用那些 HTTP 访问 header 发出 OPTIONS 请求。（例如 Origin, Access-Control-Request-Method, Access-Control-Request-Headers）
服务器响应那些访问控制headers，允许访问。（例如 Access-Control-Allow-Origin, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Allow-Credentials, Access-Control-Allow-Methods, Access-Control-Allow-Headers）
客户端用数据发出POST请求。
服务器响应POST。如果服务器响应中不存在 Access-Control-Allow-Origin header。虽然 POST 成功并在网络选项卡中显示 200 状态代码，但 xhr.status 为 0 并且 xhr.onerror 将被触发。浏览器会显示错误消息。

Header 参考资料： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Javascript CORS - 不存在 'Access-Control-Allow-Origin' header

Javascript CORS - No 'Access-Control-Allow-Origin' header is present

javascript

same-origin-policy

cors