ホームページ > ウェブフロントエンド > jsチュートリアル > React Fetch 呼び出しの「構文エラー: 入力の予期しない終了」を修正する方法?

React Fetch 呼び出しの「構文エラー: 入力の予期しない終了」を修正する方法?

Barbara Streisand
リリース: 2024-11-30 13:56:12
オリジナル
278 人が閲覧しました

How to Fix

予期しない入力の終了: ReactJS での Fetch 呼び出しによる SyntaxError の解決

ReactJS を使用して REST API 呼び出しからの応答を処理しようとすると、次のエラーが発生する場合があります:

SyntaxError: Unexpected end of input
ログイン後にコピー

このエラーは頻繁に発生します。この問題は、フェッチ リクエストで mode: 'no-cors' 設定を使用しているときに発生します。

CORS (Cross-Origin Resource Sharing) とは何ですか?

CORS はセキュリティです異なるオリジン (つまり、異なる Web サイトや URL) からのスクリプトが他のオリジンのリソースにアクセスしたり変更したりすることを防ぐメカニズム。これにより、未承認のスクリプトが他の Web サイトからデータを盗んだり操作したりすることができなくなります。

「no-cors」モードで問題が発生する理由

モードを「no-cors」に設定することで、の場合は、プリフライト リクエストを実行しないように、または CORS ヘッダーを送信しないようにブラウザーに明示的に指示します。これは、サーバーからの応答がフロントエンド JavaScript コードに対して不透明になることを意味します。

エラーを解決する方法

エラーを解決するには、モード: フェッチリクエストの「no-cors」設定。これにより、ブラウザーは必要な CORS ヘッダーを送信し、応答を適切に処理できるようになります。

代替ソリューション

モードを削除できない場合: 'no-cors ' サーバーの構成または制限により設定が変更される場合は、次のいずれかの使用を検討してください。回避策:

  • サーバーの構成:

    • Access-Control-Allow-Origin 応答ヘッダーを送信するようにサーバー構成を更新します。他のオリジンのフロントエンド JavaScript コードがアクセスできるようにします。応答。
  • CORS プロキシを使用する:

    • ブリッジする cors-anywhere などのサービスを使用して CORS プロキシを設定するフロントエンドコードとターゲットの間のギャップserver.

これらの推奨事項に従うことで、ReactJS で REST API 呼び出しからの応答を効果的に処理し、モード 'no によって発生する「予期しない入力の終了」エラーを回避できます。 -cors の設定。

以上がReact Fetch 呼び出しの「構文エラー: 入力の予期しない終了」を修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート