fetch の使用時に「mode: \'no-cors\'」を設定すると SyntaxError がスローされるのはなぜですか?

モードを 'no-cors' に設定しながらフェッチで API にアクセスするとエラーが発生します

JavaScript を使用してフェッチ プロミスを解決しようとすると、モードを 'no' に設定します以前の提案に基づく -cors' の結果、エラーが発生しました。

モードが 'cors' に設定されている場合、CORS ポリシー ブロック エラーが生成されます。提案されているように、CORS を無効にしてリソースを不透明に取得する目的でモードを「no-cors」に変更すると、予期しないエラーが発生しました:

Uncaught (in promise) SyntaxError: Unexpected end of input for return response.json()

説明

この根本原因エラーは関数にあります:

<code class="javascript">search() {
    return fetch(`${baselink}${summonerEndpoint}${summoner}${apikey}`, {mode: 'no-cors'}).then(response => {
      return response.json()
    }).then(jsonResponse => {
      console.log(jsonResponse);
      if (!jsonResponse.info) {
        return [];
      }
      return jsonResponse.info.items.map(info => ({
        id: info.id,
        accountId: info.accountId,
        name: info.name,
        profileIconId: info.profileIconId,
        revisionDate: info.revisionDate,
        summonerLevel: info.summonerLevel
      }));
    });
  }</code>

モードを 'no-cors' に設定すると、CORS 関連の問題が発生した場合にブラウザーがサイレントに失敗することを意味します。この場合、サーバーは CORS を使用してアクセス許可を付与せず、リクエストはサイレントに失敗します。

その結果、空の応答を JSON として解析しようとすると (response.json() を使用して) SyntaxError がスローされます。解析するデータがありません。

解決策

この問題を解決するには、主に 2 つの要件があります:

1. 「no-cors」モードを無効にする: フェッチ リクエストから 'mode: 'no-cors' を削除します。
2. サーバーで CORS を有効にします: サーバーが適切な Access-Control-Allow で応答することを確認します。 - クロスオリジン リクエストにアクセス許可を与えるオリジン ヘッダー。

これらの手順に従うことで、アプリケーションは CORS 関連のエラーが発生することなくデータを正常にフェッチできます。

以上がfetch の使用時に「mode: \'no-cors\'」を設定すると SyntaxError がスローされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。