Was ist CORS?

CORS (Cross-Origin Resource Sharing) ist ein Mechanismus, der es Webseiten ermöglicht, Ressourcen von einer anderen Domäne, einem anderen Port oder Protokoll anzufordern, als die Seite selbst geladen wurde. Dies geschieht durch zusätzliche HTTP-Header.

Standardmäßig wenden Browser die Same-Origin Policy (SOP) an, die es Skripten auf einer Seite verbietet, auf Daten von einer anderen Quelle (Domäne, Port, Protokoll) zuzugreifen. CORS lockert diese Politik kontrolliert, indem es dem Server ermöglicht, explizit zu erlauben, dass Anfragen von anderen Domänen erfolgen.

So funktioniert CORS:

1. Einfache Anfrage: Wenn die Anfrage bestimmten Kriterien entspricht (z.B. Verwendung der Methode GET oder POST, nur bestimmte Header erlaubt), sendet der Browser die Anfrage direkt mit einem zusätzlichen Header Origin, der die Quelle der Anfrage angibt. Der Server kann auf diesen Header mit Access-Control-Allow-Origin antworten, um die erlaubte Quelle anzugeben.
2. Preflight: Für "nicht einfache" Anfragen (z.B. mit Methoden PUT, DELETE oder mit benutzerdefinierten Headern) sendet der Browser zunächst eine Vorab-Anfrage (OPTIONS). Diese fragt den Server, ob die eigentliche Anfrage erlaubt ist. Der Server antwortet mit Headern, die die erlaubten Methoden, Header und Quellen angeben. Wenn die Preflight-Anfrage erfolgreich ist, sendet der Browser die eigentliche Anfrage.

Wichtige CORS-Header:

• Origin: Vom Browser in der Anfrage gesendet, gibt die Quelle (Domäne, Port, Protokoll) der anfragenden Seite an.
• Access-Control-Allow-Origin: Vom Server in der Antwort gesendet, gibt die Quelle an, die die Antwort empfangen darf. Kann eine spezifische Domäne, * (beliebige Quelle) oder dynamisch basierend auf Origin sein.
• Access-Control-Allow-Methods: Vom Server in der Preflight-Antwort gesendet, gibt die erlaubten HTTP-Methoden an (GET, POST, PUT, DELETE usw.).
• Access-Control-Allow-Headers: Vom Server in der Preflight-Antwort gesendet, gibt die erlaubten Header an.
• Access-Control-Allow-Credentials: Vom Server in der Antwort gesendet, gibt an, ob Cookies und andere Anmeldeinformationen in der Anfrage erlaubt sind.

Beispiel für Server-Antwort-Header, die Anfragen von https://example.com erlauben:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

CORS ist notwendig für das korrekte Funktionieren vieler Webanwendungen, die interdomänen AJAX-Anfragen verwenden, wie API-Interaktionen, Schriftartenladen, Verwendung von Web Fonts mit CDN usw. Die richtige Konfiguration von CORS auf dem Server ist entscheidend für Sicherheit und Funktionalität der Anwendung.