Wie kann ich mit Fetch auf Ressourcen unterschiedlicher Herkunft zugreifen, wenn „mode: ‚no-cors'' fehlschlägt?

Versuch, Fetch mit Modus zu verwenden: no-cors

In diesem Artikel befassen wir uns mit dem Problem der Verwendung von Fetch mit Modus: „No-Cors“ und erkunden Sie praktikable Alternativen, um CORS zu deaktivieren.

Das verstehen Problem

Beim Versuch, von einem anderen Ursprung aus auf eine Ressource zuzugreifen, beispielsweise von einer externen API, implementieren Browser eine Sicherheitsmaßnahme, die als Same-Origin-Richtlinie bezeichnet wird. Diese Richtlinie verhindert, dass JavaScript-Code direkt auf Ressourcen von anderen Ursprüngen zugreift, es sei denn, der Server antwortet mit entsprechenden CORS-Headern.

Wenn Sie auf den Fehler „Auf der angeforderten Ressource ist kein ‚Access-Control-Allow-Origin‘-Header vorhanden“ stoßen „Das bedeutet, dass der Server, von dem Sie Daten abrufen möchten, keinen Zugriff auf seine Ressourcen von Ihrem aktuellen Ursprung aus zulässt.

Deaktivieren CORS

Es ist wichtig zu beachten, dass die Einstellung mode: „no-cors“ in Ihrer Abrufanforderung CORS nicht wirklich deaktiviert. Stattdessen wird verhindert, dass Ihr Frontend-JavaScript-Code auf den Antworttext und die Header zugreift. In den meisten Fällen ist dies nicht das, was Sie beabsichtigen.

Verwendung eines CORS-Proxys

Die empfohlene Lösung ist die Verwendung eines CORS-Proxys. Ein CORS-Proxy fungiert als Vermittler zwischen Ihrem Frontend-Code und dem Zielserver. Es sendet die Anfrage an den Zielserver, empfängt die Antwort, fügt die erforderlichen CORS-Header hinzu und gibt die geänderte Antwort dann an Ihren Frontend-Code zurück. Dadurch kann Ihr Frontend-Code auf die Ressource zugreifen, ohne direkt gegen die Same-Origin-Richtlinie zu verstoßen.

Bereitstellen Ihres eigenen CORS-Proxys

Sie können ganz einfach Ihren eigenen CORS Anywhere-Proxy bereitstellen, indem Sie die folgenden Schritte befolgen:

1. Klonen Sie das CORS Anywhere-Repository: git clone https://github.com/Rob--W/cors-anywhere.git
2. Wechseln Sie in das Verzeichnis cors-anywhere: cd cors-anywhere/
3. Abhängigkeiten installieren: npm install
4. Erstellen Sie eine Heroku-App: heroku create
5. Übertragen Sie den Code an Heroku: git push heroku Master

Nach diesen Schritten haben Sie Ihren eigenen CORS Anywhere-Server, der auf Heroku läuft.

Verwenden des CORS-Proxys

Um Ihren CORS-Proxy zu verwenden, einfach Stellen Sie Ihrer Anfrage-URL die Proxy-URL voran, zum Beispiel:

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

Durch die Verwendung eines CORS-Proxys können Sie das umgehen Richtlinien gleichen Ursprungs und Zugriff auf Ressourcen unterschiedlicher Herkunft in Ihrem Frontend-Code.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Fetch auf Ressourcen unterschiedlicher Herkunft zugreifen, wenn „mode: ‚no-cors'' fehlschlägt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!