リクエストが実際には失敗していないのに「TypeError: Unable to get」を受け取る

Question

React アプリケーションでフェッチ API を使用します。アプリケーションはサーバーにデプロイされ、正常に動作します。何度もテストしました。しかし、アプリが突然動作を停止し、理由がわかりません。問題は、get リクエストを送信すると、サーバーから有効な応答を受信しますが、フェッチ API も例外をキャッチし、TypeError: Failed to fetch が表示されることです。 ; 。コードには何も変更を加えていませんが、これはすべての React コンポーネントに関わる問題です。

有効な返信を受け取りました:

しかし、次のエラーも発生します:

fetch(url)
.then(res => res.json())
.then(データ => {
  // データを使って何かをする
})
.catch(拒否されました => {
    console.log(拒否);
});

資格情報「include」を削除すると、ローカルホストでは機能しますが、サーバーでは機能しません。

StackOverflow と GitHub で提供されている解決策をすべて試しましたが、うまくいきませんでした。

Answer 1

この問題には React 固有の理由がある可能性があることはわかっていますが、「Typeerror: Failed to fetch」の検索結果で最初に表示されたため、考えられるすべての理由をここにリストしたいと思いました。

Fetch 仕様には、Fetch API から TypeError が発生する場合のリストが記載されています: https:// fetch.spec.whatwg.org/#fetch-api

2021 年 1 月現在の関連する段落は次のとおりです。これらは本文からの抜粋です。

4.6 HTTPネットワークの取得

ヘッダー オブジェクトのヘッダーに指定されたオブジェクト オブジェクトを設定します:

メソッド ステップで型エラーが発生する場合があります:

「Body mixin」セクションでは、FormData を使用する場合に TypeError を発生させる方法が複数あります。この回答は非常に長くなってしまうため、ここではリストしません。関連する段落: https://fetch.spec.whatwg.org/#body-mixin

「リクエスト クラス」セクションの新しい Request(input, init) コンストラクターは、潜在的な型エラーの地雷原です:

応答クラス内:

「メソッドの取得」セクション内

これらの潜在的な問題に加えて、TypeError を発生させる可能性のあるブラウザ固有の動作がいくつかあります。たとえば、キープアライブを true に設定し、ペイロードが 64 KB を超える場合、Chrome では TypeError が発生しますが、Firefox では同じリクエストが機能します。これらの動作は仕様には文書化されていませんが、Google 検索でそれらに関する情報を見つけて、fetch で設定した各オプションの制限を理解することができます。

Answer 2

これは、バックエンドから受け取る応答に問題がある可能性があります。サーバー上で正常に動作する場合は、応答ヘッダーに問題がある可能性があります。

応答ヘッダーの Access-Control-Allow-Origin の値を確認します。通常、応答ヘッダーの Access-Control-Allow-Origin がリクエストの送信元と一致しない場合、応答が受信された場合でも、フェッチ API はフェッチ不能エラーをスローします。