In diesem Artikel
Was ist CORS?
Cross-Origin Resource Sharing (CORS) ist ein Sicherheitsmechanismus des Browsers, der steuert, welche Web-Origins auf Ressourcen deines Servers zugreifen dürfen. Standardmäßig erzwingen Browser die Same-Origin-Policy und blockieren JavaScript daran, Anfragen an eine andere Domain, einen anderen Port oder ein anderes Protokoll zu stellen.
CORS-Header teilen dem Browser mit, welche Cross-Origin-Anfragen erlaubt sind. Ohne die richtigen Header schlagen API-Aufrufe von einem Frontend auf einer Domain zu einem Backend auf einer anderen mit einem CORS-Fehler fehl. Ein CORS-Header-Generator erzeugt die korrekten Access-Control-Allow-*-Header für deine Server-Konfiguration.
Wie CORS-Header funktionieren
CORS funktioniert über eine Reihe von HTTP-Antwort-Headern, die der Server sendet, um anzugeben, welche Origins, Methoden und Header für Cross-Origin-Anfragen zulässig sind.
- Access-Control-Allow-Origin – gibt an, welche Origins auf die Ressource zugreifen dürfen (eine bestimmte Domain oder * für jede Origin)
- Preflight-Anfragen – bei nicht einfachen Anfragen sendet der Browser zunächst eine OPTIONS-Anfrage, um zu prüfen, ob die eigentliche Anfrage erlaubt ist
- Umgang mit Credentials – Access-Control-Allow-Credentials: true erlaubt Cookies und Auth-Header, erfordert aber eine bestimmte Origin (nicht den Wildcard *)
Kostenlos testen – keine Registrierung erforderlich
CORS-Header generieren →Wann du CORS konfigurieren musst
Eine CORS-Konfiguration ist immer dann erforderlich, wenn dein Frontend und dein Backend von unterschiedlichen Origins ausgeliefert werden.
- API-Entwicklung – REST- oder GraphQL-APIs, die von Frontend-Apps auf anderen Domains angesprochen werden, benötigen CORS-Header
- CDN-Einrichtung – das Ausliefern statischer Assets von einer CDN-Subdomain erfordert CORS für Font-Dateien und API-Anfragen
- Microservices – Dienste, die während der lokalen Entwicklung auf unterschiedlichen Ports laufen, benötigen CORS, um über den Browser zu kommunizieren
Häufig gestellte Fragen
Warum kann ich nicht einfach Access-Control-Allow-Origin: * für alles verwenden?
Der Wildcard * erlaubt jede Origin, was für öffentliche APIs in Ordnung ist. Er kann jedoch nicht mit Credentials (Cookies, Authorization-Header) verwendet werden. Wenn deine API Authentifizierung erfordert, musst du die genaue Origin angeben. Der Wildcard deaktiviert außerdem andere CORS-Funktionen wie das Freigeben eigener Antwort-Header.
Was ist eine Preflight-Anfrage?
Ein Preflight ist eine HTTP-OPTIONS-Anfrage, die der Browser automatisch vor der eigentlichen Anfrage sendet. Sie prüft, ob der Server die Methode, die Header und die Origin erlaubt. Ein Preflight tritt bei Anfragen mit eigenen Headern, mit anderen Methoden als GET/POST/HEAD oder mit Content-Type-Werten außerhalb der Formular-Standards auf.
Wie behebe ich den Fehler 'No Access-Control-Allow-Origin header'?
Füge den Access-Control-Allow-Origin-Header mit der Domain der anfragenden Origin zur Antwort deines Servers hinzu. Für Express verwende die cors-Middleware, für Nginx füge add_header-Direktiven hinzu, für Apache nutze Header-set-Direktiven. Stelle sicher, dass der Header sowohl in der Preflight-OPTIONS-Antwort als auch in der eigentlichen Antwort vorhanden ist.