CORS erklärt

Vollständiger Leitfaden zu Cross-Origin Resource Sharing — wie es funktioniert, jeder Header erklärt und häufige Fehler mit Lösungen.

Überblick

Was ist CORS?

Cross-Origin Resource Sharing (CORS) ist ein auf HTTP-Headern basierender Mechanismus, der es einem Server ermoeglicht, beliebige Urspruenge (Domain, Schema oder Port) ausser seinem eigenen anzugeben, von denen ein Browser das Laden von Ressourcen erlauben soll. Browser erzwingen standardmaessig die Same-Origin-Policy, die Webseiten daran hindert, Anfragen an einen anderen Ursprung als den zu stellen, der die Seite bereitgestellt hat.

Die Same-Origin-Policy

Zwei URLs haben denselben Ursprung, wenn sie dasselbe Schema (http/https), denselben Host und denselben Port teilen. Zum Beispiel sind https://app.example.com und https://api.example.com unterschiedliche Urspruenge, da sich der Host unterscheidet. Die Same-Origin-Policy verhindert, dass eine boesartige Webseite sensible Daten von einer anderen Webseite liest -- CORS ist der Mechanismus, der diese Einschraenkung kontrolliert lockert.

Einfache Anfragen vs. Preflight

Eine "einfache Anfrage" verwendet GET, HEAD oder POST mit nur CORS-sicheren Headern und loest keinen Preflight aus. Alle anderen Cross-Origin-Anfragen -- solche, die Methoden wie PUT oder DELETE verwenden oder Header wie Authorization enthalten -- loesen einen Preflight aus: Der Browser sendet zuerst eine OPTIONS-Anfrage, um den Server um Erlaubnis zu bitten, bevor die eigentliche Anfrage gesendet wird.

Wie CORS funktioniert

Einfache Anfrage

Browser

GET /api/data
Origin: https://app.example.com

↓

Server

200 OK
Access-Control-Allow-Origin: *

↓

✓ Antwort für JS freigegeben

Preflight-Anfrage

Browser

OPTIONS /api/data
Access-Control-Request-Method: DELETE

↓

Server

204 No Content
Access-Control-Allow-Methods: DELETE

↓

Browser

DELETE /api/data
Origin: https://app.example.com

↓

✓ Antwort für JS freigegeben

CORS-Header

10 von 10 angezeigt

Häufige Fehler

8 von 8 angezeigt

In RequestDock ausprobieren

Echte HTTP-Anfragen senden und Antworten inspizieren — direkt im Browser.

RequestDock öffnen

CORS erklärt

Überblick

Was ist CORS?

Die Same-Origin-Policy

Einfache Anfragen vs. Preflight

Wie CORS funktioniert

Einfache Anfrage

Preflight-Anfrage

CORS-Header

Häufige Fehler

Verwandte Leitfäden

HTTP-Statuscodes

HTTP-Header

HTTP-Methoden

MIME-Typen

In RequestDock ausprobieren

Überblick

Was ist CORS?

Die Same-Origin-Policy

Einfache Anfragen vs. Preflight

Wie CORS funktioniert

Einfache Anfrage

Preflight-Anfrage

CORS-Header

Access-Control-Allow-OriginAntwortErforderlich

Access-Control-Allow-MethodsAntwortErforderlich

Access-Control-Allow-HeadersAntwortErforderlich

Access-Control-Allow-CredentialsAntwortOptional

Access-Control-Expose-HeadersAntwortOptional

Access-Control-Max-AgeAntwortOptional

Access-Control-Request-MethodAnfrageErforderlich

Access-Control-Request-HeadersAnfrageOptional

OriginAnfrageErforderlich

VaryAntwortOptional

Häufige Fehler

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when the request's credentials mode is 'include'.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Access to fetch at 'https://api.example.com/data' (redirected from 'https://api.example.com/old') from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

Refused to get unsafe header 'X-Request-Id'

Verwandte Leitfäden

HTTP-Statuscodes

HTTP-Header

HTTP-Methoden

MIME-Typen

In RequestDock ausprobieren