Wie kann ich „No Access-Control-Allow-Origin'-Fehler bei der Verwendung von Fetch umgehen?

Arbeiten mit CORS in Abrufanforderungen

Beim Zugriff auf Cross-Origin-Ressourcen mithilfe von Fetch kommt es häufig vor, dass die Fehlermeldung „Keine Zugriffskontrolle“ auftritt. Fehler „allow-origin“. Dies verhindert, dass clientseitiges JavaScript aufgrund von Cross-Origin-Einschränkungen auf Antworten zugreift.

Übergabe von { mode: 'no-cors' } an Fetch

Entgegen der Erwartung , { mode: 'no-cors' } wird das Problem nicht lindern. Stattdessen wird der JavaScript-Zugriff auf Antworttext- und Headerinhalte strikt blockiert.

Die Lösung: CORS-Proxy

Um dieses Problem zu umgehen, kann ein CORS-Proxy eingesetzt werden. Ein Proxy befindet sich zwischen dem Client und der Zielwebsite. Es nimmt die Anfrage entgegen, leitet sie an die Zielseite weiter und empfängt die Antwort. Entscheidend ist, dass der Proxy den Antwortheader „Access-Control-Allow-Origin“ hinzufügt, der dem Clientcode den Zugriff auf die Antwort ermöglicht.

Warum Postman auf den Endpunkt zugreifen kann

Während Postman den Zugriff auf den Endpunkt ohne einen „Access-Control-Allow-Origin“-Header ermöglicht, erlegen Webbrowser Cross-Origin-Einschränkungen auf. Dieser Header ist für die Interaktion von clientseitigem JavaScript mit der Antwort erforderlich.

Missverständnis über das Deaktivieren von CORS

Das Ziel, CORS zu „deaktivieren“, ist eigentlich so gemeint Deaktivieren der Same-Origin-Richtlinie. CORS bietet tatsächlich eine Möglichkeit, diese Richtlinie zu lockern, indem es bestimmten ursprungsübergreifenden Zugriff zulässt.

Wann sollte { mode: 'no-cors' verwendet werden }

{ mode: 'no-cors' } sollte nur in bestimmten Szenarien in Betracht gezogen werden:

• Einbetten von Inhalten in HTML-Elemente mithilfe von JavaScript, jedoch nicht direkt über ihre Attribute.
• Caching einer Ressource mithilfe von Service Workern und der Cache Storage API.

Aber auch in diesen Fällen gibt es Einschränkungen und wichtige Faktoren, die berücksichtigt werden müssen.

Das obige ist der detaillierte Inhalt vonWie kann ich „No Access-Control-Allow-Origin'-Fehler bei der Verwendung von Fetch umgehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!