CORS-Header-Generator
Der CORS-Header-Generator erzeugt Access-Control-Allow-Origin und alle weiteren CORS-Header für Ihren Server, erklärt den Preflight und testet, ob eine Anfrage durchgeht.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
CORS verstehen: Origin, Preflight und Credentials
Der CORS-Header-Generator erzeugt die Antwort-Header, mit denen Ihr Server einer fremden Website erlaubt, per JavaScript auf Ihre API zuzugreifen. Browser blockieren solche Zugriffe zwischen verschiedenen Origins (Kombination aus Protokoll, Domain und Port), solange der Server sie nicht mit Access-Control-Allow-Origin freigibt. Bei Methoden wie PUT oder DELETE und bei eigenen Headern wie Authorization schickt der Browser vorher einen CORS Preflight: eine OPTIONS-Anfrage, auf die der Server mit den erlaubten Methoden und Headern antworten muss.
Der häufigste CORS-Fehler entsteht mit Cookies oder Tokens: Sobald die Anfrage Anmeldedaten mitsendet, ist das Sternchen bei Access-Control-Allow-Origin nicht erlaubt, und Access-Control-Allow-Credentials muss genau true lauten. Wer mehrere Origins freigeben will, kann sie nicht in einen Header schreiben. Der Server prüft stattdessen den Origin der Anfrage gegen seine Liste, gibt ihn bei einem Treffer zurück und sendet Vary: Origin, damit Caches die Antworten je Origin trennen. Genau das bauen die Vorlagen für nginx, Apache und Express ein.
Wichtig für die Einordnung: CORS ist kein Zugriffsschutz für Ihre API. Es regelt nur, welche Websites im Browser die Antwort lesen dürfen. Werkzeuge wie curl oder andere Server ignorieren CORS vollständig, deshalb braucht die API trotzdem eine eigene Anmeldung. Der Testbereich spielt nach, wie ein Browser eine Anfrage beurteilen würde. Eine passende Content-Security-Policy erstellen Sie mit dem CSP-Generator.
Anleitung: CORS-Header-Generator in 5 Schritten
- Erlaubte Origins eintragen, einen pro Zeile, oder * für öffentliche Daten ohne Anmeldung.
- Erlaubte Methoden, Anfrage-Header, für JavaScript sichtbare Antwort-Header und den Preflight-Cache (Max-Age) festlegen.
- Bei Cookies oder Tokens „Cookies und Anmeldedaten erlauben (Credentials)“ aktivieren.
- Die Ausgabe für reine HTTP-Header, nginx, Apache (.htaccess) oder Node.js Express wählen und die CORS-Konfiguration kopieren.
- Unter „Anfrage testen“ Origin, Methode und eigene Header eintragen und prüfen, ob der Browser die Anfrage zulassen würde.
Typische Anwendungsfälle
- Frontend und API getrennt: Einer App auf app.example.de den Zugriff auf eine API unter api.example.de erlauben.
- Lokale Entwicklung: Den Entwicklungsserver auf localhost mit Port für die API freigeben.
- CORS-Fehler beheben: Im Testbereich nachstellen, warum der Browser eine Anfrage mit Authorization-Header blockiert.
- Öffentliche Daten: Eine API ohne Anmeldung mit Access-Control-Allow-Origin: * für alle Websites lesbar machen.
Häufige Fragen
Warum erscheint ein CORS-Fehler, obwohl die API antwortet?
Der Server hat die Anfrage beantwortet, aber ohne passenden Access-Control-Allow-Origin. Der Browser hält die Antwort dann vor dem JavaScript zurück. In den Entwicklerwerkzeugen sehen Sie die Antwort, im Code nur einen Netzwerkfehler.
Darf ich Access-Control-Allow-Origin: * verwenden?
Für öffentliche Daten ohne Anmeldung ja. Sobald Cookies, HTTP-Authentifizierung oder Client-Zertifikate mitgeschickt werden, verwirft der Browser die Antwort bei einem Sternchen. Dann müssen Sie den konkreten Origin zurückgeben.
Was ist ein CORS Preflight?
Eine automatische OPTIONS-Anfrage des Browsers vor der eigentlichen Anfrage. Sie kommt bei Methoden außer GET, HEAD und POST, bei eigenen Headern wie Authorization und bei Content-Type-Werten wie application/json. Der Server muss darauf mit Status 2xx und den Allow-Headern antworten.
Wofür ist Access-Control-Allow-Credentials?
Mit dem Wert true darf das JavaScript die Antwort auch dann lesen, wenn die Anfrage Cookies oder andere Anmeldedaten enthielt. Der Header ist nur zusammen mit einem konkreten Origin gültig, nicht mit dem Sternchen.
Wie lange speichert der Browser den Preflight?
So lange, wie Access-Control-Max-Age angibt, aber begrenzt: Chromium-Browser höchstens 7.200 Sekunden, Firefox höchstens 86.400 Sekunden. Ohne Angabe gelten 5 Sekunden.
Wie behebe ich den CORS-Fehler „No 'Access-Control-Allow-Origin' header is present“?
Der Server muss in seiner Antwort den Header Access-Control-Allow-Origin mit dem Origin Ihrer Seite oder einem Sternchen senden. Die Änderung gehört auf den Server, der die API ausliefert, nicht in den JavaScript-Code der Seite.
Wie erlaube ich CORS für localhost bei der Entwicklung?
Tragen Sie den Origin mit Port ein, etwa http://localhost:3000, und geben Sie ihn nur in der Entwicklungsumgebung frei. Ein Sternchen in der Produktion, nur weil es lokal bequemer ist, erlaubt jeder Website, die Antworten zu lesen.
Das könnte auch helfen
Hash-Generator
MD5, SHA-1, SHA-256, SHA-384 und SHA-512 für Text oder Datei berechnen und vergleichen.
ÖffnenHMAC-Generator
HMAC mit SHA-256, SHA-512, SHA-1 oder MD5 berechnen und Webhook-Signaturen prüfen.
ÖffnenPasswort-Generator
Sichere Zufallspasswörter mit wählbarer Länge und Zeichengruppen, inklusive Entropie in Bit.
ÖffnenPasswort-Stärke prüfen
Passwort testen: Entropie, typische Muster, häufige Passwörter und grobe Knackzeit.
ÖffnenPassphrase-Generator
Merkbare Passphrasen aus einer deutschen Wortliste mit über 2.000 Wörtern, nach Diceware-Art.
ÖffnenToken-Generator
Zufalls-Token als Hex, Base64URL oder alphanumerisch erzeugen, etwa für API-Keys und Secrets.
Öffnen