Firefox 不允许 CORS 请求，即使服务器返回了相应的响应标头

Question

我的应用程序使用 CORS 发出 ajax 请求，该请求适用于 Chrome，但不适用于 Firefox。我遵循了 MDN CORS 指令，但它不起作用。

以下是我的代码的省略视图：

var href = ...
var request = new XMLHttpRequest();
request.open('GET', href, true);
request.setRequestHeader("Accept", "application/json");
request.onload = ...
request.onerror = ...
try {
  request.send();
} catch (e) {
  console.log(e.message);
}

这会导致NS_ERROR_DOM_BAD_URI异常，消息"访问受限 URI 被拒绝"，代码 = 1012。

服务器正在响应我在Chrome中发出请求时验证Access-Control-Allow-Origin: http://localhost:13000。我想看看FF中的响应标头，但是Web开发人员控制台仅向我显示javascript文件的GET请求，并且我认为无法检查ajax请求和响应的标头。验证预检请求也很好，这应该是设置自定义标头的结果，但我看不到如何使用调试器访问它。

Answer 1

我终于找到了一个解决方案，这似乎表明 Firefox 中存在错误。

虽然在我的示例代码中未显示，但服务器需要 HTTP BASIC 身份验证，其提供如下：

request.open('GET', href, true, username, password);
request.withCrednetials = true;

这符合 XMLHttpRequest 的 MDN 规范。

虽然这适用于 Chrome，但使用 Firefox 会导致 ajax 请求未发送（至少它不会出现在 Firebug 的控制台或网络窗格中）并且 send（） 方法抛出异常，声称请求正在向非法域发出。

以下解决方案适用于FF和Chrome：

var href = ...
var username = ...
var password = ...
var request = new XMLHttpRequest();
request.open('GET', href, true); //do not include credentials, or FF will fail to send the request
request.setRequestHeader("Accept", "application/json");
request.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
request.onload = ...
request.onerror = ...
try {
  request.send();
} catch (e) {
  console.log(e.message);
}

请注意，如果用户名和密码作为 open（） 的参数提供，Firefox 将无法发送请求并抛出非法域异常，即使凭据是在授权标头中设置的。