EMZETT.
Login

Emzett Wiki

CORS-Fehler: blocked by CORS policy

Properties1
tagsglossar, fehlercodes, web

2 Min. Lesezeit

CORS-Fehler: blocked by CORS policy

Kurz: Der Browser blockiert die Antwort einer fremden Herkunft, weil der Server nicht ausdrücklich erlaubt hat, dass diese Seite darauf zugreifen darf.

Genauer: Meldung in der Konsole: Access to fetch at 'https://api.example.com' from origin 'https://meine-seite.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Das ist ein Schutz des Browsers, nicht des Servers: Die Anfrage kam an, die Antwort darf die Seite aber nicht lesen.

Im Detail

Warum es das gibt

Die Same-Origin-Policy verhindert, dass eine Seite (Origin A) Daten von Origin B liest. Eine Origin besteht aus Protokoll, Host und Port. CORS erlaubt dem Server B, per Header ausgewählten Origins Zugriff zu geben. Bei „nicht einfachen“ Anfragen (JSON mit Authorization, PUT/DELETE) schickt der Browser vorab eine Preflight-Anfrage (OPTIONS).

Typische Ursachen

  • Der Server sendet kein Access-Control-Allow-Origin.
  • Die Origin passt nicht (http vs. https, www vs. ohne, anderer Port, Tippfehler).
  • Der Preflight (OPTIONS) wird nicht beantwortet oder liefert 404/401.
  • Access-Control-Allow-Headers oder -Methods enthalten nicht, was gesendet wird.
  • Mit Cookies/Credentials darf Access-Control-Allow-Origin nicht * sein und Access-Control-Allow-Credentials: true muss gesetzt sein.
  • Ein Fehlerseite (500/502) enthält keine CORS-Header und tarnt sich als CORS-Fehler.

Lösungswege

  1. Auf dem Server die erlaubte Origin setzen: Access-Control-Allow-Origin: https://meine-seite.de und bei Bedarf -Methods, -Headers, -Max-Age. (Express: Paket cors; Next.js: Header in den Route-Handlern/next.config.)
  2. Preflight-OPTIONS mit 204 beantworten.
  3. In der Entwicklung einen Proxy nutzen (Vite/Next rewrites), sodass der Browser nur die eigene Origin anspricht.
  4. Nicht * zusammen mit Cookies verwenden; Origins aus einer Liste erlaubter Herkunft prüfen und zurückspiegeln.
  5. Netzwerk-Tab (F12) ansehen: Welche Antwort und welche Header kamen wirklich zurück? CORS-Erweiterungen im Browser „lösen“ nur dein lokales Problem, nicht das der Nutzer.

Siehe auch: CORS, HTTP-Header

Backlinks