为什么我的 XMLHttpRequest 的 readystate 为 4 但状态为 0？答案

【问题标题】：Why does my XMLHttpRequest have readystate 4 but status 0?为什么我的 XMLHttpRequest 的 readystate 为 4 但状态为 0？
【发布时间】：2016-07-24 19:19:52
【问题描述】：

我的 Chrome 扩展程序中有一个内容脚本，它在某些 HTTPS 页面上运行。它正在尝试向 HTTP 页面（通过后台脚本）发送 POST 请求，该页面是我设置的 API 的路由。我正在尝试发送 JSON 数据。但是，即使就绪状态为 4，我的状态仍为 0。我使用 Postman 执行相同的帖子并且它有效。这使我相信这是一个 HTTPS 协议问题，但是我在同一后台脚本中的 HTTP 页面上执行 GET 并且工作正常。那可能是什么问题？这是我的 POST 代码：

var string = json;
xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4 && xhr.status == 200) {
        var json = JSON.parse(xhr.responseText);
    }
};
xhr.send(string);

谢谢！

更新：

我使用 chrome 开发者工具调试后台脚本，发现错误是“对预检请求的响应未通过访问控制检查：没有 'Access-Control-Allow-Origin' 标头出现在请求的资源。”。我猜后台脚本错误不会打印到主控制台。

更新：

我必须将发布到的网站添加到清单中的权限字段。现在可以了。

【问题讨论】：

没有像0这样的状态码，请参考developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes
不管怎样，当我进入onreadystatechange函数查看xhr.status时，都是0。
状态 0 通常意味着请求被中止，要么是intentionally，要么是由于中断（例如导航导致页面被卸载）。请求已经“完成”了（所以，readyState === 4），但没有收到任何响应来设置不同的状态。
@gtsioni 更新了我的答案。如果你想讨论调试 AJAX 错误的其他方法，我们可以找个时间聊聊。
我在响应 OPTIONS 调用时也看到了这一点，ajax 层报告状态 0，但 Fiddler 显示 500（原始响应显示 500），并带有描述错误的有效 html 正文。跨度>

标签： javascript post google-chrome-extension xmlhttprequest

【解决方案1】：

我有一个类似的问题，经过几天的调试，我发现的唯一解决方案是通过将 XMLHttpRequest 打开方法中的 async 参数设置为 false 来使 XMLHttpRequest 同步。

【讨论】：

为什么会有帮助？
这解决了我在尝试使用 WKWebView 和 XMLHttpRequest 下载 blob url 时遇到的问题。我尝试设置各种访问标头无济于事，但这有效。

【解决方案2】：

readyState 值为 4 表示操作成功完成或失败。 status 属性初始化为 0，如果发生错误，将保持为 0。为xhr.onerror 属性分配一个事件处理程序，我敢打赌您会看到该处理程序触发。 很遗憾，错误事件没有提供任何有关导致错误的有用信息。

要找出导致错误的原因，我会使用 Chrome 中的调试工具。菜单 => 更多工具 => 开发者工具。然后转到“网络”选项卡。在那里，您可以看到您的网页发出的所有 HTTP 请求。它将在那里显示任何错误的更详细信息。

【讨论】：

我在这方面有点缺乏经验，我很难解释你链接我的页面。一个有效的错误处理程序可能是什么样的？谢谢！
我能够设置一个 onerror 函数处理程序，并且 event.detail 未定义。
有没有办法从错误对象或 xhr 对象本身获取错误详细信息？浏览器调试工具真的是唯一的方法吗？
正如 Jon Anderson 所说，我看到了“网络”选项卡，但除了调试模式外，没有什么比说“错误”了
对于我的情况，错误发生在远程服务器上，我想查看实际的错误信息，我该怎么办？谢谢。

【解决方案3】：

你做了什么？

我必须将发布的网站添加到清单中的权限字段。现在可以了。

XMLHttpRequest.setRequestHeader("Access-Control-Allow-Origin", "the api website"); ?

【讨论】：

我认为他的意思是将其添加到 html 标题中的 manifest.json -> developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/…