ajax - 预检响应中的 Access-Control-Allow-Origin 不启用跨域访问

Question

我正在尝试使用 AJAX 向 NodeJS 服务器发送 CORS 请求。我想返回一些 JSON 数据。我在网上找到了很多教程，它们都说同样的事情，我已经尝试过，但我无法让它发挥作用。这是 AJAX 请求:

$.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) {
});

这是服务器上的代码:

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 预检请求，但这也不起作用。

--编辑--这是控制台中的实际错误消息:

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 继续。

关于.done与.then，它们似乎可以互换。或者至少，在这个例子中，.then 和 .fail 工作得很好。

Answer 1

您在 OPTIONS 预检响应中正确设置了 CORS header ，但您还需要在实际 GET 响应中设置 Access-Control-Allow-Origin(您的来源或 *)。 GET 响应应使用相同的 CORS header 进行响应，无论是否存在预检响应。这意味着它必须发送适当的 CORS header ，但不需要发送除 Access-Control-Allow-Origin 之外的任何内容。 (如果涉及其他非简单组件，例如非简单动词或 header ，它们将在预检中被允许或拒绝；实际的 GET 响应不需要担心它们。)

Enable CORS网站有一个 CORS testing tool帮助您查看您指定的请求中涉及的 header 。我已经使用该工具设置了 test similar to your case (带有非简单 Content-Type header 的 GET)。如果我们检查该测试的结果(小心——这些步骤的显示有点乱，但它们都在那里)，我们会看到一个预检响应:

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 响应还有一个 Access-Control-Allow-Origin header ，并且没有其他 CORS header 。如果您有任何进一步的不确定性，请随意调整该工具的设置以运行各种其他测试用例。