Pourquoi le réglage du mode : no-cors génère-t-il une erreur de syntaxe lors de l'utilisation de la récupération ?

Erreur lors de l'accès à l'API avec Fetch lors de la définition du mode sur « no-cors »

Lors d'une tentative de résolution d'une promesse de récupération à l'aide de JavaScript, définition du mode sur « no-cors » -cors' basé sur une suggestion précédente a entraîné une erreur.

Lorsque le mode est défini sur 'cors', cela produit une erreur de blocage de la politique CORS. Comme suggéré, changer le mode en « no-cors » avec l'intention de désactiver CORS et de récupérer la ressource de manière opaque a entraîné une erreur inattendue :

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

Explication

La cause première de ce problème L'erreur réside dans la fonction :

<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>

Définir le mode sur « no-cors » implique que le navigateur doit échouer silencieusement s'il rencontre des problèmes liés à CORS. Dans ce cas, le serveur n'accorde pas l'autorisation à l'aide de CORS et la requête échoue silencieusement.

Par conséquent, la tentative ultérieure d'analyser la réponse vide en tant que JSON (en utilisant Response.json()) renvoie une SyntaxError, car là Il n'y a aucune donnée à analyser.

Résolution

Pour résoudre ce problème, il y a deux exigences principales :

1. Désactiver le mode « no-cors » : Supprimez le 'mode : 'no-cors'' de la requête de récupération.
2. Activez CORS sur le serveur : Assurez-vous que le serveur répond avec le contrôle d'accès approprié -En-tête d'origine pour accorder l'autorisation à la demande d'origine croisée.

En suivant ces étapes, l'application peut récupérer les données avec succès sans rencontrer d'erreurs liées à CORS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!