为什么这个CORS请求只在Firefox中失败？

Question

我正在使用凭据和预检请求实现CORS，我有点困惑为什么预检请求在Firefox 30中始终失败，但在Safari（7.0.2）和Chrome35中有效。我认为这个问题不同于“为什么经过身份验证的CORS请求的预检OPTIONS请求在Chrome而不是Firefox中有效？”因为我没有收到401，而是来自浏览器客户端的特定CORS消息：

“跨源请求已阻止：同源策略不允许读取 http://myurl.dev.com 的远程资源。可以通过将资源移动到同一域或启用 CORS 来解决此问题。

在不显示源代码的情况下，我正在做的是：

在服务器上：

OPTIONS响应的标头：

< Li > Access-Control-Allow-Origin:[[在此处从请求中复制Origin]] < Li > Access-Control-Allow-Methods:" POST GET OPTIONS " < Li > Access-Control-Allow-Headers:" X-Requested-With " < Li > Access-Control-Allow-Credentials:" true "

发布响应的标题:

• 访问控制-允许-源：[[从此处的请求复制源]]
• 访问控制-允许-凭据：“真”

在浏览器客户端中：

jQuery.ajax({
  url: requestUrl,
  type: 'POST',
  data: getData(),
  xhrFields: {
    withCredentials: true
  }
});

根据规范，这将触发 OPTIONS 预检请求，该请求需要在其响应中包含 CORS 标头。我已经通读了 W3C 规范好几遍，我无法确定我在印前检查响应中做错了什么（如果有的话）。

Answer 1

我注意到，当您发送设置了cookie的CORS（跨源资源共享）请求时，Firefox不会发送所需的响应头。

解决方案：

下面的解决方案仅为 OPTIONS 请求添加标头，并且仅接受来自 example.com 的请求。您可以更改其他请求方法和预期主机的实现。

JS代码

var xmlhttp = new XMLHttpRequest();
xmlhttp.withCredentials = true;

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
        if (xmlhttp.status == 200) {
            success_callback(xmlhttp.responseText);
        } else {
            error_callback(xmlhttp.statusText);
        }
    }
};
xmlhttp.open("DELETE", url);
xmlhttp.send(null);

当您发送删除请求时，浏览器会发送一个飞行前选项请求，这要求在响应标头中包含访问控制允许方法。基于此标头值，发送实际的删除请求。在Firefox中，当您发送删除请求时，飞行前请求的响应标头没有预期的标头，因此无法发送实际的删除请求。

要克服此问题，请使用以下NGINX服务器配置。

NGINX代码

#handle CORS requests by adding required headers
if ($http_origin ~* .example.com) {
    set $cors "CORS-${request_method}";
}

if ($cors = "CORS-OPTIONS") {
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
    add_header 'Access-Control-Allow-Origin' $http_origin;
}

好读CORS：https://www.html5rocks.com/en/tutorials/cors/

Answer 2

请注意，Firefox是这里唯一兼容的浏览器。如果Access-Control-Allow-Method的解析每https://fetch.spec.whatwg.org/#cors-preflight-fetch失败，则需要返回网络错误。并且根据标头值的ABNF，它绝对是逗号分隔的值。

Answer 3

问题：为什么此 CORS 请求仅在 Firefox 中失败？

答：虽然与OP的具体情况无关，但它可能会帮助您了解Firefox默认情况下不信任Windows证书存储中的CA（证书颁发机构），这可能会导致Firefox中的CORS请求失败（正如Svish在问题注释中提到的）。

要允许Firefox信任Windows证书存储中的CA：

• 在Firefox中，在地址栏中键入about： config
• 如果出现提示，接受任何警告
• 右键单击创建一个新的布尔值，并输入security.enterprise_roots.enabled作为名称将值设置为true
• 然后重新测试失败的请求

答案来源：https://support.umbrella.com/hc/en-us/articles/115000669728-Configuring-Firefox-to-use-the-Windows-Certificate-Store