CORS-Fehler
Cross-Origin Resource Sharing (CORS) ist ein Standard, mit dem ein Server die Same-Origin-Policy lockern kann. Dadurch lassen sich bestimmte Cross-Origin-Anfragen ausdrücklich zulassen und andere ablehnen. Wenn eine Website beispielsweise einen einbettbaren Dienst anbietet, kann es notwendig sein, bestimmte Einschränkungen zu lockern. Eine solche CORS-Konfiguration einzurichten, ist nicht unbedingt einfach und kann einige Herausforderungen mit sich bringen. Auf diesen Seiten betrachten wir einige häufige CORS-Fehlermeldungen und wie Sie die zugrunde liegenden Probleme beheben können.
Wenn die CORS-Konfiguration nicht korrekt eingerichtet ist, zeigt die Browserkonsole einen Fehler wie "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [some site]" an. Er weist darauf hin, dass die Anfrage wegen eines Verstoßes gegen die CORS-Sicherheitsregeln blockiert wurde. Das muss allerdings nicht auf einen Konfigurationsfehler hindeuten. Möglicherweise wird die Anfrage von der Webanwendung des Benutzers oder dem externen Dienst absichtlich abgelehnt. Wenn der Endpunkt jedoch verfügbar sein soll, müssen Sie die Ursache untersuchen.
Ein CORS-Problem erkennen
Um das zugrunde liegende Problem mit der CORS-Konfiguration zu verstehen, müssen Sie herausfinden, welche Anfrage betroffen ist und warum. Die folgenden Schritte können Ihnen dabei helfen:
- Rufen Sie die betreffende Website oder Webanwendung auf und öffnen Sie die Entwicklerwerkzeuge.
- Versuchen Sie, den fehlgeschlagenen Vorgang zu reproduzieren, und prüfen Sie, ob in der Konsole eine CORS-Fehlermeldung angezeigt wird. Sie sieht wahrscheinlich etwa so aus:
Der Text der Fehlermeldung ähnelt dem folgenden:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://some-url-here. (Reason: additional information here).
Hinweis: Aus Sicherheitsgründen sind Einzelheiten darüber, was bei einer CORS-Anfrage schiefgelaufen ist, für JavaScript-Code nicht verfügbar. Der Code weiß lediglich, dass ein Fehler aufgetreten ist. Um die genaue Ursache festzustellen, müssen Sie die Details in der Browserkonsole nachlesen.
Möglichkeiten auf der Client-Seite
Die meisten CORS-Fehler lassen sich nur auf dem Server beheben, da der Server steuert, ob Cross-Origin-Zugriff erlaubt ist. Es gibt jedoch einige Maßnahmen, die Sie auf der Client-Seite ergreifen können:
Eine Preflight-Anfrage vermeiden
Browser senden unter bestimmten Bedingungen vor der eigentlichen Anfrage eine Preflight-Anfrage, etwa bei benutzerdefinierten Headern, anderen Methoden als GET/HEAD/POST oder nicht einfachen Inhaltstypen. Wenn der Server Preflight-Anfragen nicht verarbeitet, können Sie Ihre Anfrage so umgestalten, dass sie als einfache Anfrage gilt:
- Verwenden Sie nur die Methoden
GET,HEADoderPOST. - Setzen Sie nur CORS-safelisted request headers (beispielsweise
Accept,Content-LanguageoderContent-Type). - Verwenden Sie für
Content-Typenurapplication/x-www-form-urlencoded,multipart/form-dataodertext/plain.
Bei einfachen Anfragen entfällt die Preflight-Anfrage vollständig. So vermeiden Sie CORS-Fehler, die mit der Verarbeitung von Preflight-Anfragen zusammenhängen.
Den Modus no-cors für opake Antworten verwenden
Wenn Sie weder den Antwortinhalt noch die Header lesen müssen – beispielsweise beim Senden von Analyse-Beacons oder beim Laden von Ressourcen in einen Cache über einen Service Worker –, können Sie mode in einem fetch()-Aufruf auf "no-cors" setzen:
fetch("https://api.example.com/log", {
method: "POST",
mode: "no-cors",
body: data,
});
Die Antwort ist dann opak: Ihr Status ist 0, ihre Header sind leer und ihr Inhalt kann von JavaScript nicht gelesen werden. Das ist beabsichtigt: no-cors deaktiviert die CORS-Prüfung, dafür verlieren Sie jeglichen Zugriff auf den Antwortinhalt.
Einen Proxyserver verwenden
Wenn Sie den Remote-Server nicht kontrollieren und dieser keine CORS-Header setzt, können Sie Anfragen über einen Server leiten, den Sie kontrollieren. Ihr Server ruft die Ressource für Sie ab und gibt sie mit geeigneten CORS-Headern zurück. Dieser Ansatz erhöht die Latenz und schafft eine Abhängigkeit von Ihrem Proxy, funktioniert aber, wenn andere Möglichkeiten nicht zur Verfügung stehen.
CORS-Fehlermeldungen
Wenn Anfragen aufgrund von CORS fehlschlagen, zeigt Firefox Meldungen in seiner Konsole an. Ein Teil des Fehlertexts ist eine Begründung, die näher erläutert, was schiefgelaufen ist. Die Begründungen sind unten aufgeführt. Klicken Sie auf eine Meldung, um einen Artikel mit einer ausführlicheren Erklärung des Fehlers und möglichen Lösungen zu öffnen.
- Grund: CORS deaktiviert
- Grund: CORS-Anfrage fehlgeschlagen
- Grund: CORS-Header 'Origin' kann nicht hinzugefügt werden
- Grund: Externe Weiterleitung einer CORS-Anfrage nicht erlaubt
- Grund: CORS-Anfrage verwendet nicht HTTP
- Grund: CORS-Header 'Access-Control-Allow-Origin' fehlt
- Grund: CORS-Header 'Access-Control-Allow-Origin' stimmt nicht mit 'xyz' überein
- Grund: Anmeldedaten werden nicht unterstützt, wenn der CORS-Header 'Access-Control-Allow-Origin' den Wert '*' hat
- Grund: Methode im CORS-Header 'Access-Control-Allow-Methods' nicht gefunden
- Grund: 'true' im CORS-Header 'Access-Control-Allow-Credentials' erwartet
- Grund: CORS-Preflight-Anfrage fehlgeschlagen
- Grund: Ungültiges Token 'xyz' im CORS-Header 'Access-Control-Allow-Methods'
- Grund: Ungültiges Token 'xyz' im CORS-Header 'Access-Control-Allow-Headers'
- Grund: Token 'xyz' aus der CORS-Preflight-Anfrage fehlt im CORS-Header 'Access-Control-Allow-Headers'
- Grund: Mehrere CORS-Header 'Access-Control-Allow-Origin' sind nicht erlaubt
Die meisten CORS-Fehler lassen sich nur auf dem Server beheben, da der Server steuert, ob Cross-Origin-Zugriff erlaubt ist. Es gibt jedoch einige Maßnahmen, die Sie auf der Client-Seite ergreifen können:
Eine Preflight-Anfrage vermeiden
Browser senden unter bestimmten Bedingungen vor der eigentlichen Anfrage eine Preflight-Anfrage, etwa bei benutzerdefinierten Headern, anderen Methoden als GET/HEAD/POST oder nicht einfachen Inhaltstypen. Wenn der Server Preflight-Anfragen nicht verarbeitet, können Sie Ihre Anfrage so umgestalten, dass sie als einfache Anfrage gilt:
- Verwenden Sie nur die Methoden
GET,HEADoderPOST. - Setzen Sie nur CORS-safelisted request headers (beispielsweise
Accept,Content-LanguageoderContent-Type). - Verwenden Sie für
Content-Typenurapplication/x-www-form-urlencoded,multipart/form-dataodertext/plain.
Bei einfachen Anfragen entfällt die Preflight-Anfrage vollständig. So vermeiden Sie CORS-Fehler, die mit der Verarbeitung von Preflight-Anfragen zusammenhängen.
Den Modus no-cors für opake Antworten verwenden
Wenn Sie weder den Antwortinhalt noch die Header lesen müssen – beispielsweise beim Senden von Analyse-Beacons oder beim Laden von Ressourcen in einen Cache über einen Service Worker –, können Sie mode in einem fetch()-Aufruf auf "no-cors" setzen:
fetch("https://api.example.com/log", {
method: "POST",
mode: "no-cors",
body: data,
});
Die Antwort ist dann opak: Ihr Status ist 0, ihre Header sind leer und ihr Inhalt kann von JavaScript nicht gelesen werden. Das ist beabsichtigt: no-cors deaktiviert die CORS-Prüfung, dafür verlieren Sie jeglichen Zugriff auf den Antwortinhalt.
Einen Proxyserver verwenden
Wenn Sie den Remote-Server nicht kontrollieren und dieser keine CORS-Header setzt, können Sie Anfragen über einen Server leiten, den Sie kontrollieren. Ihr Server ruft die Ressource für Sie ab und gibt sie mit geeigneten CORS-Headern zurück. Dieser Ansatz erhöht die Latenz und schafft eine Abhängigkeit von Ihrem Proxy, funktioniert aber, wenn andere Möglichkeiten nicht zur Verfügung stehen.