JavaScript跨域资源共享-不存在'Access-Control-Allow-Origin'标头

Question

我一直在处理CORS，并遇到了以下问题。客户端抱怨没有“Access-Control-Allow-Origin”头，而实际上它们是存在的，客户端发出了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请求

Chrome POST请求

在Firefox浏览器中

Firefox控制台日志

Firefox OPTIONS请求

Firefox POST请求

- Weishi Z

Answer 1

简而言之: 访问控制头部 (例如 Access-Control-Allow-Origin) 需要同时在OPTIONS和实际的POST响应中出现。

工作流程:

1. 客户端发送具有这些HTTP访问头的OPTIONS请求。 (例如 Origin, Access-Control-Request-Method, Access-Control-Request-Headers)

2. 服务器响应这些访问控制头，允许访问。(例如 Access-Control-Allow-Origin, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Allow-Credentials, Access-Control-Allow-Methods, Access-Control-Allow-Headers)

3. 客户端使用数据进行POST请求。

4. 服务器响应POST请求。如果服务器响应中没有Access-Control-Allow-Origin头，则尽管POST成功并在网络选项卡中显示200状态代码，但是xhr.status为0，并且会触发xhr.onerror。浏览器将显示错误消息。

头部参考: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

- Weishi Z

Answer 2

值为null的Access-Control-Allow-Origin不可以，必须是要么是源域名，要么是*以允许任何来源。

更多详细信息，请参考MDN。

- TimoStaudinger

---

我已将其设置为原始域。但是本地主机也存在此问题（本地主机请求其他域的资源）。 - Weishi Z