Javascript CORS - 不存在“Access-Control-Allow-Origin”标头

Posted 2023-02-27

【中文标题】Javascript CORS - 不存在“Access-Control-Allow-Origin”标头

【英文标题】：Javascript CORS - No 'Access-Control-Allow-Origin' header is present

【发布时间】：2016-10-30 03:56:03

【问题描述】：

我一直在使用 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 选项请求

Chrome POST 请求

在火狐中

Firefox 控制台日志

Firefox 选项请求

Firefox POST 请求

【参考方案1】：

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

更多详情，refer to MDN。

【讨论】：

我已将其设置为原始域。但是 localhost 也有这个问题。 （本地主机请求其他域的资源。）

【参考方案2】：

简而言之：访问控制标头（例如 Access-Control-Allow-Origin）需要在响应 OPTIONS 和实际 POST 时出现。

工作流程：

Client 使用这些 HTTP 访问标头发出 OPTIONS 请求。 （例如Origin, Access-Control-Request-Method, Access-Control-Request-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 标头。虽然 POST 成功并在网络选项卡中显示 200 状态代码，但 xhr.status 为 0 并且将触发 xhr.onerror。浏览器会显示错误消息。

标题参考： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS