CORS – Definition, Erklärung und Praxisbeispiel
Ein Browser-Sicherheitsmechanismus, der kontrolliert, welche Websites auf Ressourcen anderer Domains (Origins) zugreifen dürfen – mittels spezieller HTTP-Header.
Ein Browser-Sicherheitsmechanismus, der kontrolliert, welche Websites auf Ressourcen anderer Domains (Origins) zugreifen dürfen – mittels spezieller HTTP-Header. CORS (Cross-Origin Resource Sharing) ist ein HTTP-Header-basierter Mechanismus, der es Webservern erlaubt, festzulegen, welche fremden Origins (Kombinationen aus Protokoll, Domain und Port) auf ihre Ressourcen zugreifen dürfen.
Was ist CORS? Definition, Funktionsweise & Fehlerbehebung
CORS (Cross-Origin Resource Sharing) ist einer der häufigsten Stolpersteine in der Webentwicklung – fast jeder Entwickler hat schon die berüchtigte Fehlermeldung 'Access to fetch has been blocked by CORS policy' gesehen.
Hinter CORS steckt ein wichtiger Sicherheitsmechanismus: Er verhindert, dass eine bösartige Website im Hintergrund API-Anfragen an andere Dienste sendet und so Daten stiehlt. Richtig verstanden und konfiguriert, ist CORS kein Hindernis, sondern ein wesentlicher Baustein der Web-Sicherheit.
Zu CORS finden Sie hier eine kompakte Definition, eine verständliche Erklärung und ein konkretes Praxisbeispiel - ergänzt um weitere Anwendungsfälle und FAQ.
Was ist CORS?
- CORS - Ein Browser-Sicherheitsmechanismus, der kontrolliert, welche Websites auf Ressourcen anderer Domains (Origins) zugreifen dürfen – mittels spezieller HTTP-Header.
CORS (Cross-Origin Resource Sharing) ist ein HTTP-Header-basierter Mechanismus, der es Webservern erlaubt, festzulegen, welche fremden Origins (Kombinationen aus Protokoll, Domain und Port) auf ihre Ressourcen zugreifen dürfen. Standardmäßig blockieren Browser Cross-Origin-Anfragen aus Sicherheitsgründen (Same-Origin Policy).
CORS lockert diese Einschränkung kontrolliert: Der Server teilt über den Header 'Access-Control-Allow-Origin' mit, welche Origins zugelassen sind. Für komplexe Anfragen (z. B. mit Custom Headers oder PUT/DELETE-Methoden) sendet der Browser zunächst eine Preflight-Anfrage (OPTIONS), um die erlaubten Methoden und Header abzufragen.
Weitere CORS-Header steuern, ob Cookies mitgesendet werden dürfen (Access-Control-Allow-Credentials), welche HTTP-Methoden erlaubt sind und wie lange das Preflight-Ergebnis gecacht wird.
Wie funktioniert CORS?
Wenn eine Webseite auf https://app.example.com eine API-Anfrage an https://api.example.com sendet, prüft der Browser die Same-Origin Policy: Unterschiedliche Subdomains = unterschiedliche Origins. Bei einfachen GET-Anfragen sendet der Browser den Request direkt und prüft den Access-Control-Allow-Origin-Header der Antwort.
Bei komplexen Anfragen (Custom Headers, PUT, DELETE) sendet der Browser zuerst einen OPTIONS-Preflight-Request. Der Server antwortet mit den erlaubten Origins, Methoden und Headers. Nur wenn die Konfiguration passt, sendet der Browser den eigentlichen Request.
Diese Prüfung findet ausschließlich im Browser statt – Server-zu-Server-Kommunikation ist nicht betroffen.
Praxisbeispiele
Eine React-App auf https://app.firma.de ruft eine API auf https://api.firma.de auf – CORS muss konfiguriert werden, da verschiedene Subdomains als verschiedene Origins gelten.
Ein SaaS-Produkt stellt eine öffentliche API bereit und setzt Access-Control-Allow-Origin: * für die lesenden Endpunkte, aber spezifische Origins für schreibende Operationen.
Ein Entwickler debuggt einen CORS-Fehler: Die API erlaubt zwar die richtige Origin, aber der Custom-Header 'X-API-Key' fehlt in Access-Control-Allow-Headers.
Ein Finanzportal nutzt CORS mit Credentials (Access-Control-Allow-Credentials: true), um Cookies für die Authentifizierung über Subdomains hinweg zu senden.
Ein Microservice-Setup nutzt ein API Gateway, das CORS zentral für alle dahinterliegenden Services konfiguriert – statt in jedem Service einzeln.
Typische Anwendungsfälle
Single-Page-Applications: Frontend und Backend laufen auf unterschiedlichen Domains oder Ports und müssen über CORS kommunizieren
Microservice-Architekturen: Verschiedene Services auf unterschiedlichen Subdomains müssen untereinander und mit dem Frontend kommunizieren
Öffentliche APIs: Drittanbieter-Websites sollen kontrolliert auf Ihre API zugreifen können
Entwicklungsumgebungen: Lokales Frontend (localhost:3000) muss auf API-Server (localhost:8080) zugreifen
Embedded Widgets: Ein Chat-Widget oder Analytics-Snippet, das auf fremden Websites eingebunden wird und mit Ihrem Server kommuniziert
Vorteile und Nachteile
Vorteile
- Schutz vor Cross-Site-Angriffen: Verhindert, dass bösartige Websites API-Anfragen im Namen des Nutzers senden
- Granulare Kontrolle: Erlaubte Origins, Methoden, Headers und Cookie-Handling lassen sich exakt konfigurieren
- Browser-nativ: Keine zusätzliche Software nötig – alle modernen Browser unterstützen CORS vollständig
- Preflight-Caching: Preflight-Antworten können gecacht werden, um den Overhead bei wiederholten Anfragen zu minimieren
Nachteile
- Häufige Fehlerquelle: Falsche CORS-Konfiguration ist einer der häufigsten Bugs in der Webentwicklung
- Performance-Overhead: Preflight-Anfragen verdoppeln die Anzahl der HTTP-Requests bei komplexen Anfragen
- Nur Browser-seitig: CORS schützt nicht vor Server-zu-Server-Anfragen – kein Ersatz für API-Authentifizierung
- Wildcard-Einschränkungen: Access-Control-Allow-Origin: * ist nicht mit Credentials kombinierbar, was die Konfiguration verkompliziert
Häufig gestellte Fragen zu CORS
Warum bekomme ich einen CORS-Fehler, obwohl mein Server korrekt antwortet?
Der häufigste Grund: Der Server gibt den korrekten Access-Control-Allow-Origin-Header nicht zurück – oder nur bei GET, aber nicht beim OPTIONS-Preflight. Prüfen Sie in den Browser-DevTools unter Network den Preflight-Request (OPTIONS) und dessen Antwort-Header. Weitere häufige Ursachen: fehlende erlaubte Header in Access-Control-Allow-Headers oder ein Redirect, der den CORS-Header nicht enthält.
Ist CORS ein Sicherheitsrisiko?
CORS selbst ist ein Sicherheitsmechanismus, keine Schwachstelle. Allerdings kann eine zu permissive Konfiguration (Access-Control-Allow-Origin: * in Kombination mit sensiblen Daten) Risiken erzeugen. Generell gilt: Erlauben Sie nur die Origins, die tatsächlich Zugriff benötigen, und verwenden Sie Credentials nur wenn nötig.
Wie konfiguriere ich CORS in Node.js/Express?
Am einfachsten mit dem npm-Paket 'cors': app.use(cors({ origin: 'https://ihre-domain.de', credentials: true })). Für mehrere Origins: origin: ['https://app.firma.de', 'https://admin.firma.de']. Für feingranulare Kontrolle können Sie einen Callback nutzen, der die Origin dynamisch gegen eine Whitelist prüft.
Direkte naechste Schritte
Wenn Sie CORS konkret einsetzen oder bewerten wollen, sind diese Seiten die sinnvollsten nächsten Schritte (Angebot, Kosten, Kontext):
CORS im Kontext moderner IT-Projekte
CORS gehört zum Bereich Sicherheit und spielt in zahlreichen IT-Projekten eine wichtige Rolle. Bei der Entscheidung für oder gegen CORS sollten Unternehmen nicht nur die technischen Eigenschaften betrachten, sondern auch organisatorische Faktoren wie vorhandenes Know-how im Team, bestehende Infrastruktur und langfristige Wartbarkeit.
Unsere Erfahrung aus über 250 Softwareprojekten zeigt, dass die richtige Einordnung einer Technologie oder Methode im Gesamtkontext oft entscheidender ist als ihre isolierten Stärken.
Wir bei Groenewold IT Solutions haben CORS in verschiedenen Kundenprojekten eingesetzt und kennen sowohl die Stärken als auch die typischen Herausforderungen, die bei der Einführung auftreten können. Falls Sie unsicher sind, ob CORS für Ihr Vorhaben geeignet ist, beraten wir Sie gerne in einem unverbindlichen Gespräch. Dabei analysieren wir Ihre konkreten Anforderungen und geben eine ehrliche Einschätzung – auch wenn das Ergebnis sein sollte, dass eine andere Lösung besser zu Ihnen passt.
Weitere Begriffe aus dem Bereich Sicherheit und benachbarten Themen finden Sie im IT-Glossar. Für konkrete Anwendungen, Kosten und Abläufe empfehlen wir unsere Leistungsseiten und Themenseiten – dort werden viele der hier erklärten Konzepte in der Praxis eingeordnet.
Verwandte Begriffe
Sichere API-Kommunikation für Ihre Anwendung?
Wir beraten Sie gerne zu CORS und finden die optimale Lösung für Ihre Anforderungen. Profitieren Sie von unserer Erfahrung aus über 200 Projekten.