P粉4389183232023-08-24 16:31:57
この問題には 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 で設定した各オプションの制限を理解することができます。
P粉7014918972023-08-24 14:39:30
これは、バックエンドから受け取る応答に問題がある可能性があります。サーバー上で正常に動作する場合は、応答ヘッダーに問題がある可能性があります。
応答ヘッダーの Access-Control-Allow-Origin
の値を確認します。通常、応答ヘッダーの Access-Control-Allow-Origin
がリクエストの送信元と一致しない場合、応答が受信された場合でも、フェッチ API はフェッチ不能エラーをスローします。