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

2022-01-15 00:00:00 cors javascript same-origin-policy

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

I've been working with CORS and encountered the following issue. Client complains about no 'Access-Control-Allow-Origin' header is present, while they are present, and client make the actual POST request and receives 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 console log

Chrome 选项请求

Chrome OPTIONS request

Chrome POST 请求

Chrome POST request

在火狐中

Firefox 控制台日志

Firefox Console Log

Firefox 选项请求

Firefox OPTIONS request

Firefox POST 请求

Firefox POST request

推荐答案

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

In short: Access control headers (e.g. Access-Control-Allow-Origin) need to present in response for both OPTIONS and actual POST.

工作流程:

  1. Client 使用这些 HTTP 访问标头发出 OPTIONS 请求.(例如Origin、Access-Control-Request-Method、Access-Control-Request-Headers)

  1. Client make OPTIONS request with those HTTP access headers. (e.g. 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-标题)

Server respond with those access control headers, allowing access. (e.g. 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 请求.

Client makes POST request with data.

服务器响应 POST.如果服务器响应中不存在 Access-Control-Allow-Origin 标头.虽然 POST 成功并在 network 选项卡中显示 200 状态码，但 xhr.status 为 0 并且会触发 xhr.onerror.浏览器会显示错误消息.

Server respond to POST. If Access-Control-Allow-Origin header is NOT present in the server response. Although the POST is successful and shows 200 status code in network tab, xhr.status is 0 and xhr.onerror will be triggered. And browser would show up the error message.

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

相关文章