Wie kann ich Cross-Origin-Request-Fehler beim Abrufen von Daten mit JavaScript beheben?

Versuch, CORS mit Fetch zu deaktivieren und mit „Access-Control-Allow-Origin“ umzugehen

Sie sind auf eine häufige Herausforderung gestoßen, als Versuchen Sie mithilfe von Fetch ursprungsübergreifende Anforderungen von Ihrem Client-JavaScript-Code. Die Fehlermeldung, die Sie erhalten haben, weist darauf hin, dass der Endpunkt, von dem Sie etwas abrufen möchten, nicht den Header „Access-Control-Allow-Origin“ enthält, der für den Cross-Origin-Zugriff erforderlich ist.

Problem: Sie versuchen, das Objekt { mode: 'no-cors' } in Fetch zu verwenden, um CORS zu deaktivieren, aber dieser Ansatz funktioniert falsch.

Warum der „No-Cors“-Modus nicht funktioniert:

Einstellungsmodus: „No-Cors“ in Fetch deaktiviert CORS nicht; Stattdessen weist es Browser an, zu verhindern, dass Ihr Frontend-JavaScript auf den Antworttext und die Header zugreift. Diese Einstellung ist normalerweise nicht wünschenswert, da Sie normalerweise möchten, dass Ihr Code auf die Antwort zugreifen kann.

Lösung: CORS-Proxy

Die Lösung für dieses Problem liegt in Verwendung eines CORS-Proxys. Ein CORS-Proxy fungiert als Vermittler zwischen Ihrem Frontend-Code und dem Remote-Endpunkt und ermöglicht ursprungsübergreifende Anfragen durch Ändern der Antwortheader.

Durch die Verwendung eines CORS-Proxys können Sie Ihre Anfragen über den Proxy weiterleiten, der zusätzliche Informationen hinzufügt den erforderlichen Access-Control-Allow-Origin-Header zur Antwort. Dadurch kann Ihr Frontend-Code auf den Antworttext und die Header zugreifen, als käme er vom selben Ursprung.

Bereitstellen Ihres eigenen Proxys

Eine einfache Möglichkeit, Ihren Proxy bereitzustellen Um einen eigenen CORS-Proxy zu erstellen, müssen Sie die folgenden Schritte ausführen:

1. Klonen Sie das Cors-Anywhere-GitHub-Repository (https://github.com/Rob--W/cors-anywhere).
2. Abhängigkeiten mit npm install installieren.
3. Erstellen Sie ein Heroku-Konto und führen Sie heroku create aus.
4. Übertragen Sie Ihren Code mit git push heroku master an Heroku.

Nach der Bereitstellung können Sie loslegen CORS-Proxy unter einer URL wie https://cryptic-headland-94862.herokuapp.com.

Stellen Sie Ihrer Anforderungs-URL die Proxy-URL voran

Um den Proxy zu verwenden , stellen Sie Ihrer Anfrage-URL einfach die Proxy-URL voran. Wenn Sie beispielsweise https://example.com abrufen möchten, verwenden Sie die folgende URL:

https://cryptic-headland-94862.herokuapp.com/https://example.com

Indem Sie der Anforderungs-URL den Proxy voranstellen, können Sie Cross-Origin-Anfragen erfolgreich durchführen, dank des von der hinzugefügten Headers „Access-Control-Allow-Origin“. Proxy.

Zusätzliche Überlegungen:

• Postman kann auf den Endpunkt zugreifen, da es sich um ein Debugging-Tool handelt, das Same-Origin-Einschränkungen ignoriert.
• Die Verwendung von Modus: „no-cors“ oder Modus: „opaque“ in Fetch ist nicht der richtige Ansatz zum Deaktivieren von CORS.
• CORS ist eine Sicherheitsmaßnahme und es ist wichtig, sie nicht leichtfertig zu umgehen. Berücksichtigen Sie immer die Auswirkungen auf die Sicherheit, bevor Sie CORS-Einschränkungen deaktivieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Cross-Origin-Request-Fehler beim Abrufen von Daten mit JavaScript beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!