web-dev-qa-db-ja.com

ローカルホストでホストされている場合、Fetch APIはNetworkErrorで拒否します(Firefoxのみ)

フェッチAPIを使用すると、Firefoxで奇妙な動作が見られます。私が何か間違ったことをしているのか、それともいくつかのドキュメントを見逃していて、私がやろうとしていることが許可されていないのかわかりません。

以下のページをローカルホストでホストすると、Firefoxはフェッチを拒否し、TypeError: NetworkError when attempting to fetch resource.開発ツールまたはWiresharkのいずれにもフェッチリクエストが表示されません。診断に利用できるデバッグはこれ以上ないようです。

「ローカルホストでホストする」とは、ファイルシステムからではなく、ローカルWebサーバー(この場合はnginx)によってホストされることを意味します。アドレスバーには、たとえば「 http://localhost/fetch_localhost_error.html "」と表示されます。

http://jsbin.com/yowebiyigi/edit?html,output または他のエンドポイントで同じページをホストすると、期待される出力が得られます-テキストがdivに表示され、フェッチリクエストが開発ツールで作られました。

Chromeは両方のシナリオで正しく機能します。これは、ローカルホストとリモートサーバーの両方がCORSなどに対して正しく構成されていることを意味します(ただし、FFがリモートにクエリを実行することはありません)。

私は48とNightly(51)の両方を、両方ともWindows 7で試しました。残念ながら、現在、他の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>

フェッチベースのソリューションをローカルで開発できないため、これはかなり苛立たしいことです。誰かが何が起こっているかに光を当てることができますか?

11

構成に問題があったことがわかりました。

network.http.referer.XOriginPolicy

0に設定する必要があります。そうしないと、フェッチが失敗します。思い出せない理由で1に設定しました。

4

私の場合、それはいまいましいAdBlockでした。 3時間無駄に...
誰かがこれを早く見つけてくれることを願っています。

17
Henrikh Kantuni

私にとっての問題は、ローカルで(開発環境で)フェッチしていたAPIに無効な証明書が含まれていたことでした。これを解決するために、FirefoxでAPIを直接ヒットし、それらのセキュリティ例外を追加しました。

0
Grid Trekkor