Access-Control-Allow-Origin in preflight响应不启用跨域访问 [英] Access-Control-Allow-Origin in preflight response doesn't enable cross-domain access

问题描述

我试图使用AJAX发送CORS请求到nodeJS服务器。我想返回一些JSON数据。我在网上找到了许多教程，所有的说都一样的东西，我试过，但我不能让这个工作。以下是AJAX请求：

I am trying to send a CORS request using AJAX to a nodeJS server. I want to return some JSON data. I've found numerous tutorials online that all say the same thing, which I've tried, but I can't get this to work. Here's the AJAX request:

$.ajax({
        url: "http://some.other.url.com:8880",
        type: "GET",
        crossDomain: true,
        contentType: 'application/json'
    }).then(function(response) {
        $scope.allData = jQuery.parseJSON( response );
        console.log($scope.allData);
    }).fail(function(response) {
});

这里是服务器上的代码：

And here is the code on the server:

var path = url.parse(req.url).pathname,
    match = router.match(path),
    rescode;

    console.log("---: " + req.method);

if (req.method === 'OPTIONS') {
    var headers = {};
    headers["Access-Control-Allow-Origin"] = "*";
    headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS";
    headers["Access-Control-Allow-Credentials"] = false;
    headers["Access-Control-Max-Age"] = '86400'; // 24 hours
    headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept";
    res.writeHead(200, headers);
    return res.end();
}

我还试过了没有 res.end（）即不返回OPTIONS预检请求，也不起作用。

I'v also tried it without the return on res.end() i.e. not returning the OPTIONS preflight request, and that doesn't work either.

- 编辑 -
以下是控制台中的实际错误消息：

--Edit-- Here is the actual error message in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://other.domain.com:8880/. This can be fixed by moving the resource to the same domain or enabling CORS.

服务器正在获取请求。 OPTIONS和GET请求都会触发服务器并被响应。事实上，在控制台日志中为AJAX请求的页面，我可以点击CORS错误，看到响应，它是正确的数据。但我似乎不能得到javascript继续。

The server is getting the requests. Both the OPTIONS and then GET requests are hitting the server and being responded to. In fact, in the console log for the page making the AJAX request, I can click on the CORS error and see the response, and it is the correct data. But I can't seem to get the javascript to continue.

关于 .done vs .then 他们似乎工作可互换。或者至少在这个例子中， .then 和 .fail 工作正常。

In regards to .done vs .then, they seem to work interchangeable. Or at least, in this example, the .then and .fail are working just fine.

推荐答案

您在OPTIONS预检响应中正确设置CORS标头，但您还需要设置您的实际GET响应中的访问控制允许原始（到您的来源或 * ）。 GET响应应该使用相同的CORS头响应，不管是否有预检响应。这意味着它必须发送适当的CORS头，但除了 Access-Control-Allow-Origin ，它不需要发送任何东西。 （如果涉及非简单动词或标题的其他非简单组件，则它们将在预检中被允许或拒绝;实际的GET响应不需要担心它们。）

You're correctly setting CORS headers in your OPTIONS preflight response, but you also need to set Access-Control-Allow-Origin (either to your origin or *) on your actual GET response. The GET response should respond with the same CORS headers, regardless of whether there was a preflight response or not. This means that it must send the appropriate CORS headers, but it does not need to send anything except for Access-Control-Allow-Origin. (If other non-simple components like non-simple verbs or headers are involved, they will be allowed or denied in the preflight; the actual GET response does not need to worry about them.)

启用CORS 网站具有 CORS测试工具，以帮助您查看您指定的请求中涉及的标头。我已使用该工具设置测试类似于您的情况（GET with非简单 Content-Type header）。如果我们检查测试的结果（仔细 - 步骤显示有点乱序，但他们都在那里），我们看到预检回应：

The Enable CORS site has a CORS testing tool to help you see the headers involved in a request that you specify. I've used that tool to set up a test similar to your case (GET with non-simple Content-Type header). If we examine the results of that test (careful -- the steps are presented little bit out of order, but they're all there), we see a preflight response:

Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
...
Access-Control-Allow-Origin: http://client.cors-api.appspot.com
Access-Control-Allow-Headers: X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept

最后的CORS响应：

Content-Length: 0
Content-Type: application/json
Access-Control-Allow-Origin: http://client.cors-api.appspot.com
Cache-Control: no-cache

如您所见，GET响应还有一个访问控制-Allow-Origin 头，没有其他CORS头。如果您有任何进一步的不确定性，请随时调整该工具上的设置，以运行各种其他测试用例。

As you can see, the GET response also has a Access-Control-Allow-Origin header and no other CORS headers. If you have any further uncertainties, feel free to tweak the settings on that tool to run a wide range of other test cases.

这篇关于Access-Control-Allow-Origin in preflight响应不启用跨域访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！