我的应用程序使用 CORS 发出 ajax 请求,该请求在 Chrome 中有效,但在 Firefox 中无效。我关注了MDN CORS instructions ,但它不起作用。
这是我的代码的省略 View :
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。
服务器正在响应 Access-Control-Allow-Origin: http://localhost:13000
,我在 Chrome 中发出请求时对此进行了验证。我想查看 FF 中的响应 header ,但 Web 开发人员控制台仅向我显示 javascript 文件的 GET 请求,并且我看不到如何检查 ajax 请求和响应的 header 。验证飞行前请求也很好,这应该是通过设置自定义 header 产生的,但我不知道如何使用调试器访问该请求。
最佳答案
我终于找到了解决方案,这似乎表明 Firefox 中存在错误。
虽然我的示例代码中没有显示,但服务器需要 HTTP BASIC 身份验证,其提供如下:
request.open('GET', href, true, username, password);
request.withCrednetials = true;
这符合 MDN specification for XMLHttpRequest .
虽然这适用于 Chrome,但对于 Firefox,它会导致 ajax 请求未发送(至少它不会出现在 Firebug 的控制台或网络 Pane 中),并且 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 将无法发送请求并引发非法域异常,即使在授权 header 中设置了凭据。
关于javascript - 即使服务器返回适当的响应 header ,Firefox 也不允许 CORS 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27001894/