CORS (Cross-Origin Resource Sharing) ist ein Sicherheitsmechanismus des Browsers, der festlegt, welche Webseiten auf Ressourcen einer anderen Herkunft (Origin) zugreifen dürfen. Ohne CORS wuerde eine Webseite fremde APIs oder Daten nicht abrufen koennen – mit CORS kann der Server kontrolliert Ausnahmen erlauben.

Was ist eine Origin?

Eine Origin besteht aus Protokoll (z.B. https), Domain (z.B. api.example.de) und Port (z.B. :443). Zwei URLs mit unterschiedlicher Domain, anderem Protokoll oder anderem Port gelten als verschiedene Origins. Nach der Same-Origin-Policy darf eine Webseite standardmaessig nur Ressourcen der eigenen Origin laden – ein JavaScript-Fetch auf eine fremde Origin wuerde vom Browser blockiert.

Wie funktioniert CORS?

Der Server entscheidet per HTTP-Header, welche Origins Zugriff bekommen. Der wichtigste Header ist Access-Control-Allow-Origin. Antwortet der Server zum Beispiel mit Access-Control-Allow-Origin: https://www.example.de, darf genau diese Webseite die Daten lesen. Ein Stern (*) erlaubt allen Origins den Zugriff – praktisch fuer oeffentliche APIs, aber riskant bei sensiblen Daten.

Weitere Header: Access-Control-Allow-Methods (z.B. GET, POST, PUT, DELETE), Access-Control-Allow-Headers (erlaubte Zusatz-Header) und Access-Control-Allow-Credentials (ob Cookies mitgesendet werden duerfen).

Einfache Requests und Preflight

Bei einfachen Anfragen (GET, HEAD oder POST mit wenigen Standard-Headern) prueft der Browser die Antwort direkt auf CORS-Header. Bei komplexeren Anfragen – etwa PUT, DELETE oder eigenen Headern – schickt der Browser zuerst eine Preflight-Anfrage per OPTIONS. Der Server muss diese beantworten und die erlaubten Methoden nennen, erst dann folgt die eigentliche Anfrage.

Typischer Fehler

Fehlt der CORS-Header, erscheint in der Browser-Konsole eine Meldung wie No 'Access-Control-Allow-Origin' header is present. Das Problem liegt dann fast immer auf der Serverseite: Der Server muss die passenden Header setzen. Alternativ kann man die Anfrage ueber einen eigenen Proxy leiten, sodass Browser und API dieselbe Origin haben.

Verwandte Grundlagen: AJAX, HTTP, REST, API, SPA, Session.