Wie kann der Fehler „Kein ‚Access-Control-Allow-Origin'-Header' beim Abrufen von Daten von einer REST-API behoben werden?

„Auf der angeforderten Ressource ist kein ‚Access-Control-Allow-Origin‘-Header vorhanden“ beim Abrufen von Daten von einer REST-API

Beim Versuch, Daten von abzurufen Wenn Sie eine REST-API verwenden, während Sie auf einem lokalen Host arbeiten, wird möglicherweise die Fehlermeldung „Fetch-API kann nicht geladen werden“ angezeigt. Die Antwort auf die Preflight-Anfrage besteht die Zugriffskontrollprüfung nicht: Nein Der Header „Access-Control-Allow-Origin“ ist auf der angeforderten Ressource vorhanden.“ Dieser Fehler ist auf die „Same Origin Policy“ zurückzuführen, die von Browsern erzwungen wird und die die Interaktion von Ressourcen unterschiedlicher Herkunft (Domänen, Ports und Protokolle) untereinander einschränkt.

Überwindung des Fehlers

Verwendung von a CORS-Proxy

Wenn Sie keine Kontrolle über den Server haben, der Ihre REST-API hostet, und das einzige Problem mit seinen Antworten das Fehlen der erforderlichen ist Access-Control-Allow-Origin-Header können Sie einen CORS-Proxy nutzen, um die Anfrage zu erleichtern.

Hier sind Schritte zum Einrichten Ihres eigenen Proxys:

1. Klonen Sie das Repository: git Klonen Sie https://github.com/Rob--W/cors-anywhere.git
2. Navigieren Sie zum geklonten Verzeichnis: cd cors-anywhere/
3. Abhängigkeiten installieren: npm install
4. Eine Heroku-Instanz erstellen: heroku create
5. Proxy bereitstellen: git push heroku master

Stellen Sie nach der Bereitstellung Ihrer REST-API-URL die generierte Proxy-URL voran. Zum Beispiel: https://cryptic-headland-94862.herokuapp.com/https://example.com.

CORS-Preflight vermeiden

Die Anfrage in der Frage löst eine fällige Preflight-Anfrage aus bis hin zur Einbindung des Authorization-Headers. Um diesen Preflight zu verhindern, sollten Sie die Verwendung einer der folgenden Techniken in Betracht ziehen:

• Lassen Sie den Authorization-Header aus der ersten Anfrage weg.
• Verwenden Sie einen anderen Authentifizierungsmechanismus, z. B. das Einbetten von Authentifizierungsdaten in die Anforderungstext oder Abfrageparameter.
• Ändern Sie den Server so, dass er POST-Anfragen mit einem Content-Type: application/x-www-form-urlencoded-Body akzeptiert ein JSON-formatierter Parameter.

Auflösung von „Access-Control-Allow-Origin-Header darf kein Platzhalter sein“

Bei Anfragen, die Anmeldeinformationen beinhalten, beschränken Browser den Frontend-JavaScript-Codezugriff auf die Antwort, wenn der Wert des Access-Control-Allow-Origin-Headers „*“ ist. In solchen Fällen muss der Wert genau mit dem Ursprung Ihres Frontend-Codes übereinstimmen (z. B. http://127.0.0.1:3000).

Hinweis: Vermeiden Sie die Verwendung von Chrome CORS-Plugins, z Sie fügen einfach einen generischen Access-Control-Allow-Origin: *-Header in Antworten ein, was zu unerwartetem Verhalten führen kann. Verwenden Sie Curl-Befehle mit dem Flag -H für zuverlässige Tests.

Das obige ist der detaillierte Inhalt vonWie kann der Fehler „Kein ‚Access-Control-Allow-Origin'-Header' beim Abrufen von Daten von einer REST-API behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!