Fetch API 在本地主机上托管时因 NetworkError 拒绝（仅限 Firefox）

Question

我在使用提取 API 时在 Firefox 上看到奇怪的行为。我不知道我是否做错了什么，或者我是否遗漏了一些文档并且不允许我尝试做的事情。

如果我在本地主机上托管以下页面，Firefox 会拒绝抓取并给出 TypeError: NetworkError when attempting to fetch resource. 我在开发工具或 Wireshark 中都没有看到任何抓取请求。似乎没有任何进一步的调试可用于诊断。

"hosting on localhost" 是指由本地 Web 服务器（在本例中为 nginx）托管，而不是来自文件系统。例如，地址栏显示“http://localhost/fetch_localhost_error.html”。

在 http://jsbin.com/yowebiyigi/edit?html,output 或任何其他端点托管相同的页面会提供预期的输出 - 文本出现在 div 中，我看到在开发工具中发出了提取请求。

Chrome 在这两种情况下都能正常工作，这意味着本地主机和远程服务器都为 CORS 等正确配置（但 FF 似乎永远不会查询远程）。

我已经在 Windows 7 上尝试了 48 和 Nightly (51)。不幸的是，我现在无法访问任何其他 OS。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="output"></div>
  <div id="error"></div>
  <script>
 var result = fetch('http://www.randomtext.me/api/')

 result.then(
    function(response){
        return response.json()
    })
 .then(
   function (response) {
        document.getElementById("output").innerHTML = response.text_out;
   })
 .catch(
    function(error){
        document.getElementById("error").innerHTML = error;
    });

  </script>
</body>
</html>

这非常令人沮丧，因为我无法在本地开发基于提取的解决方案。任何人都可以阐明正在发生的事情吗？

Answer 1

原来我遇到了配置问题。

network.http.referer.XOriginPolicy

应设置为 0，否则获取将失败。由于我不记得的原因，我将它设置为 1。

Answer 2

在我的案例中，这就是该死的 AdBlock。浪费了3个小时...
希望有人能早点找到这个。

Answer 3

我遇到的问题是我在本地（在我的开发环境中）获取的 API 的证书无效。为了解决这个问题，我直接用 Firefox 访问 API 并为它们添加了安全例外。

Answer 4

还要仔细检查您查询的终点是否正确。刚意识到我的端口号少了 1 个字符，这就是 waster

Fetch API 在本地主机上托管时因 NetworkError 拒绝（仅限 Firefox）

Fetch API rejects with NetworkError when hosted on localhost (Firefox only)

javascript

firefox

fetch-api