CORS-Fehler

Identifizieren eines CORS-Problems

Um das zugrunde liegende Problem mit der CORS-Konfiguration zu verstehen, müssen Sie herausfinden, welche Anfrage fehlerhaft ist und warum. Diese Schritte können Ihnen dabei helfen:

1. Navigieren Sie zu der betreffenden Website oder Web-App und öffnen Sie die Developer Tools.
2. Versuchen Sie nun, die fehlgeschlagene Transaktion zu reproduzieren und überprüfen Sie die Konsole, ob Sie eine CORS-Verletzungs-Fehlermeldung sehen. Es wird wahrscheinlich so aussehen:

Der Text der Fehlermeldung wird in etwa wie folgt aussehen:

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).

Überlegungen auf der Client-Seite

Die meisten CORS-Fehler können nur auf dem Server behoben werden, da der Server steuert, ob Cross-Origin-Zugriff erlaubt ist. Es gibt jedoch einige Dinge, die Sie auf der Client-Seite tun können:

Vermeiden Sie das Auslösen eines Preflight-Checks

Browser senden eine Preflight-Anfrage, bevor die tatsächliche Anfrage ausgelöst wird, wenn bestimmte Bedingungen erfüllt sind (benutzerdefinierte Header, Methoden außer GET/HEAD/POST oder nicht einfache Content-Typen). Wenn der Server keine Preflight-Anfragen bearbeitet, können Sie Ihre Anfrage so umstrukturieren, dass sie als einfache Anfrage qualifiziert:

• Verwenden Sie nur die Methoden GET, HEAD oder POST.
• Setzen Sie nur CORS-safelisted request headers (wie z.B. Accept, Content-Language oder Content-Type).
• Verwenden Sie nur application/x-www-form-urlencoded, multipart/form-data oder text/plain für Content-Type.

Einfache Anfragen umgehen den Preflight-Check vollständig, was eine Klasse von CORS-Fehlern im Zusammenhang mit der Preflight-Bearbeitung vermeidet.

Verwenden Sie den no-cors-Modus für undurchsichtige Antworten

Wenn Sie den Antwortinhalt oder die Header nicht lesen müssen - zum Beispiel beim Senden von Analytics-Beacons oder beim Laden von Ressourcen in einen Cache über einen Service Worker - können Sie den mode auf "no-cors" in einem fetch()-Aufruf setzen:

fetch("https://api.example.com/log", {
  method: "POST",
  mode: "no-cors",
  body: data,
});

Die Antwort wird undurchsichtig sein: Ihr Status ist 0, ihre Header sind leer und ihr Body ist für JavaScript nicht lesbar. Dies ist absichtlich so - no-cors deaktiviert die CORS-Prüfung, aber im Gegenzug verlieren Sie jeglichen Zugriff auf den Antwortinhalt.

Verwenden Sie einen Proxy-Server

Wenn Sie den entfernten 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 in Ihrem Namen ab und gibt sie mit den entsprechenden CORS-Headern zurück. Dieser Ansatz erhöht die Latenz und führt zu einer Abhängigkeit von Ihrem Proxy, funktioniert aber, wenn andere Optionen nicht verfügbar sind.

CORS-Fehlermeldungen

Die Konsole von Firefox zeigt Nachrichten in ihrer Konsole an, wenn Anfragen aufgrund von CORS fehlschlagen. Ein Teil des Fehlertextes ist eine "Grund"-Nachricht, die zusätzlichen Einblick in das Problem gibt. Die Grundnachrichten sind unten aufgeführt; klicken Sie auf die Nachricht, um einen Artikel zu öffnen, der den Fehler genauer erklärt und mögliche Lösungen bietet.

• Grund: CORS deaktiviert
• Grund: CORS-Anfrage war nicht erfolgreich
• Grund: CORS-Header 'Origin' kann nicht hinzugefügt werden
• Grund: Externe Weiterleitung durch CORS-Anfrage nicht erlaubt
• Grund: CORS-Anfrage nicht HTTP
• Grund: CORS-Header 'Access-Control-Allow-Origin' fehlt
• Grund: CORS-Header 'Access-Control-Allow-Origin' stimmt nicht überein mit 'xyz'
• Grund: Anmeldeinformationen werden nicht unterstützt, wenn der CORS-Header 'Access-Control-Allow-Origin' '*' ist
• Grund: Methode im CORS-Header 'Access-Control-Allow-Methods' nicht gefunden
• Grund: erwartetes 'true' im CORS-Header 'Access-Control-Allow-Credentials'
• Grund: CORS-Preflight-Kanal war nicht erfolgreich
• 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: Fehlendes Token 'xyz' im CORS-Header 'Access-Control-Allow-Headers' vom CORS-Preflight-Kanal
• Grund: Mehrere CORS-Header 'Access-Control-Allow-Origin' nicht erlaubt

Die meisten CORS-Fehler können nur auf dem Server behoben werden, da der Server steuert, ob Cross-Origin-Zugriff erlaubt ist. Es gibt jedoch einige Dinge, die Sie auf der Client-Seite tun können:

Vermeiden Sie das Auslösen eines Preflight-Checks

Browser senden eine Preflight-Anfrage, bevor die tatsächliche Anfrage ausgelöst wird, wenn bestimmte Bedingungen erfüllt sind (benutzerdefinierte Header, Methoden außer GET/HEAD/POST oder nicht einfache Content-Typen). Wenn der Server keine Preflight-Anfragen bearbeitet, können Sie Ihre Anfrage so umstrukturieren, dass sie als einfache Anfrage qualifiziert:

• Verwenden Sie nur die Methoden GET, HEAD oder POST.
• Setzen Sie nur CORS-safelisted request headers (wie z.B. Accept, Content-Language oder Content-Type).
• Verwenden Sie nur application/x-www-form-urlencoded, multipart/form-data oder text/plain für Content-Type.

Einfache Anfragen umgehen den Preflight-Check vollständig, was eine Klasse von CORS-Fehlern im Zusammenhang mit der Preflight-Bearbeitung vermeidet.

Verwenden Sie den no-cors-Modus für undurchsichtige Antworten

Wenn Sie den Antwortinhalt oder die Header nicht lesen müssen — zum Beispiel beim Senden von Analytics-Beacons oder beim Laden von Ressourcen in einen Cache über einen Service Worker — können Sie den mode auf "no-cors" in einem fetch()-Aufruf setzen:

fetch("https://api.example.com/log", {
  method: "POST",
  mode: "no-cors",
  body: data,
});

Die Antwort wird undurchsichtig sein: Ihr Status ist 0, ihre Header sind leer und ihr Body ist für JavaScript nicht lesbar. Dies ist absichtlich so — no-cors deaktiviert die CORS-Prüfung, aber im Gegenzug verlieren Sie jeglichen Zugriff auf den Antwortinhalt.

Verwenden Sie einen Proxy-Server

Wenn Sie den entfernten 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 in Ihrem Namen ab und gibt sie mit den entsprechenden CORS-Headern zurück. Dieser Ansatz erhöht die Latenz und führt zu einer Abhängigkeit von Ihrem Proxy, funktioniert aber, wenn andere Optionen nicht verfügbar sind.

Siehe auch

• Glossar: CORS
• Einführung zu CORS
• Serverseitige CORS-Einstellungen
• CORS-fähiges Bild
• CORS-Einstellungsattribute