Javascript CORS - 没有'Access-Control-Allow-Origin'标题 [英] Javascript CORS - No 'Access-Control-Allow-Origin' header is present

问题描述

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

Chrome OPTIONS request

Chrome POST请求

Chrome POST request

在Firefox中

Firefox控制台日志

Firefox Console Log

Firefox OPTIONS请求

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. 客户使用这些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-Headers ）

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成功并在网络选项卡中显示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

这篇关于Javascript CORS - 没有'Access-Control-Allow-Origin'标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！