CORS (Cross-Origin Resource Sharing) ist ein HTTP-Header-basierter Sicherheitsmechanismus, der regelt, ob und wie eine Website auf Ressourcen einer anderen Domain (Origin) zugreifen darf. CORS ist die kontrollierte Lockerung der Same-Origin-Policy — einer fundamentalen Browser-Sicherheitsregel, die Cross-Origin-Zugriffe standardmaessig blockiert.
CORS begegnet jedem Webentwickler frueher oder spaeter — typischerweise als Fehlermeldung in der Browser-Konsole. Das Verstaendnis von CORS ist essentiell fuer die Arbeit mit REST-APIs, Third-Party-Services und modernen Frontend-Architekturen.
Same-Origin-Policy
Was ist ein Origin?
Ein Origin setzt sich aus drei Teilen zusammen:
| Teil | Beispiel |
|---|---|
| Schema (Protokoll) | https:// |
| Host (Domain) | pakumedia.de |
| Port | :443 (Standard fuer HTTPS) |
Zwei URLs haben denselben Origin, wenn Schema, Host und Port identisch sind. https://pakumedia.de und https://api.pakumedia.de sind verschiedene Origins (andere Subdomain).
Warum die Same-Origin-Policy existiert
Ohne diese Policy koennte jede Website im Hintergrund Anfragen an andere Domains senden — inklusive der Cookies des Nutzers. Eine boesartige Seite koennte so auf die Bank-Daten, E-Mails oder Social-Media-Konten des Nutzers zugreifen. Die Same-Origin-Policy verhindert das.
Wie CORS funktioniert
Einfache Anfragen
Fuer einfache GET- und POST-Anfragen mit Standard-Headern sendet der Browser die Anfrage direkt und prueft die CORS-Header in der Antwort:
- Browser sendet Anfrage mit
Origin-Header - Server antwortet mit
Access-Control-Allow-Origin-Header - Browser vergleicht: Stimmt der Origin ueberein? Zugriff erlaubt oder blockiert
Preflight Requests
Fuer komplexere Anfragen (PUT, DELETE, Custom Headers) sendet der Browser zuerst eine OPTIONS-Anfrage:
| Schritt | Was passiert |
|---|---|
| 1. Preflight | Browser sendet OPTIONS-Anfrage mit gewuenschten Methoden und Headern |
| 2. Antwort | Server antwortet mit erlaubten Methoden und Headern |
| 3. Pruefung | Browser prueft, ob die eigentliche Anfrage erlaubt ist |
| 4. Anfrage | Wenn erlaubt: eigentliche Anfrage wird gesendet |
CORS-Response-Header
| Header | Beschreibung | Beispiel |
|---|---|---|
Access-Control-Allow-Origin | Erlaubte Origins | https://pakumedia.de oder * |
Access-Control-Allow-Methods | Erlaubte HTTP-Methoden | GET, POST, PUT, DELETE |
Access-Control-Allow-Headers | Erlaubte Request-Header | Content-Type, Authorization |
Access-Control-Allow-Credentials | Cookies/Auth erlaubt | true |
Access-Control-Max-Age | Preflight-Cache-Dauer (Sekunden) | 86400 |
Access-Control-Expose-Headers | Header, die JS lesen darf | X-Total-Count |
Wichtige Regeln
Access-Control-Allow-Origin: *erlaubt alle Origins, aber nicht zusammen mit Credentials- Bei Cookies/Auth muss ein spezifischer Origin statt
*angegeben werden - Preflight-Responses koennen gecacht werden (
Max-Age), um wiederholte OPTIONS-Anfragen zu vermeiden
CORS in der Praxis
API-Aufrufe aus dem Frontend
Typisches Szenario: Eine React-Anwendung auf app.pakumedia.de ruft eine API auf api.pakumedia.de auf. Ohne CORS-Konfiguration blockiert der Browser alle Anfragen.
Next.js API Routes
In Next.js sind API Routes auf demselben Origin wie das Frontend — CORS ist daher nicht noetig. Bei externen API-Aufrufen vom Client aus muss der externe Server CORS erlauben, oder der Aufruf wird ueber eine eigene API Route als Proxy geleitet.
Third-Party-APIs
Viele externe APIs (Google Maps, Stripe, Analytics) haben CORS bereits konfiguriert. Wenn nicht, ist ein Server-seitiger Proxy die Loesung — der Server unterliegt nicht der Same-Origin-Policy.
Haeufige CORS-Probleme
"No 'Access-Control-Allow-Origin' header"
Die haeufigste Fehlermeldung. Ursache: Der Server sendet keinen CORS-Header. Loesung: CORS auf dem Server konfigurieren.
Credentials-Problem
Wenn credentials: 'include' in der Fetch-Anfrage gesetzt ist, darf Access-Control-Allow-Origin nicht * sein. Es muss der exakte Origin angegeben werden.
Preflight schlaegt fehl
Der Server antwortet nicht auf OPTIONS-Anfragen oder sendet falsche Header. Loesung: OPTIONS-Route auf dem Server einrichten und korrekte CORS-Header senden.
CORS und Sicherheit
CORS ist kein Ersatz fuer serverseitige Authentifizierung und Autorisierung. CORS schuetzt den Nutzer davor, dass boesartige Websites im Hintergrund auf seine Daten zugreifen. Es schuetzt nicht den Server — dafuer sind CSRF-Tokens, Authentifizierung und Eingabevalidierung zustaendig.
CORS arbeitet zusammen mit anderen Sicherheitsmechanismen:
- Content Security Policy: Kontrolliert, welche Ressourcen geladen werden duerfen
- CSRF-Schutz: Verhindert ungewollte State-aendernde Anfragen
- XSS-Praevention: Verhindert Schadcode-Einschleusung