フェッチ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>
フェッチベースのソリューションをローカルで開発できないため、これはかなり苛立たしいことです。誰かが何が起こっているかに光を当てることができますか?
構成に問題があったことがわかりました。
network.http.referer.XOriginPolicy
0に設定する必要があります。そうしないと、フェッチが失敗します。思い出せない理由で1に設定しました。
私の場合、それはいまいましいAdBlockでした。 3時間無駄に...
誰かがこれを早く見つけてくれることを願っています。
私にとっての問題は、ローカルで(開発環境で)フェッチしていたAPIに無効な証明書が含まれていたことでした。これを解決するために、FirefoxでAPIを直接ヒットし、それらのセキュリティ例外を追加しました。