Warum löst die Einstellung \'mode: \'no-cors\'\' bei der Verwendung von fetch einen SyntaxError aus?

Fehler beim Zugriff auf die API mit Fetch beim Festlegen des Modus auf „no-cors“

Während des Versuchs, ein Abrufversprechen mithilfe von JavaScript aufzulösen, wurde der Modus auf „no“ gesetzt -cors‘ basierend auf einem vorherigen Vorschlag führte zu einem Fehler.

Wenn der Modus auf „cors“ eingestellt ist, wird ein CORS-Richtlinienblockierungsfehler erzeugt. Wie vorgeschlagen führte die Änderung des Modus auf „no-cors“ mit der Absicht, CORS zu deaktivieren und die Ressource undurchsichtig abzurufen, zu einem unerwarteten Fehler:

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

Erklärung

Die Hauptursache dafür Der Fehler liegt in der Funktion:

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

Das Setzen des Modus auf „no-cors“ impliziert, dass der Browser stillschweigend abstürzen sollte, wenn er auf CORS-bezogene Probleme stößt. In diesem Fall erteilt der Server mithilfe von CORS keine Berechtigung und die Anfrage schlägt stillschweigend fehl.

Folglich löst der nachfolgende Versuch, die leere Antwort als JSON zu analysieren (mithilfe von „response.json()“), wie dort einen SyntaxError aus Es sind keine Daten zum Parsen vorhanden.

Lösung

Um dieses Problem zu beheben, gibt es zwei Hauptanforderungen:

1. Deaktivieren Sie den „No-Cors“-Modus: Entfernen Sie den „Modus: ‚no-cors‘“ aus der Abrufanforderung.
2. Aktivieren Sie CORS auf dem Server: Stellen Sie sicher, dass der Server mit der entsprechenden Zugriffssteuerungszulassung antwortet -Origin-Header zum Erteilen der Berechtigung für die Cross-Origin-Anfrage.

Durch Befolgen dieser Schritte kann die Anwendung die Daten erfolgreich abrufen, ohne dass CORS-bezogene Fehler auftreten.

Das obige ist der detaillierte Inhalt vonWarum löst die Einstellung \'mode: \'no-cors\'\' bei der Verwendung von fetch einen SyntaxError aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!