CORS-Header-Builder & Validator

Führung

CORS-Header-Builder & Validator

Erstellen Sie korrekte CORS (Cross-Origin Resource Sharing)-Header mit einem visuellen Konfigurator. Legen Sie zulässige Ursprünge, Methoden, Header und Anmeldeinformationen fest und erhalten Sie dann die generierten HTTP-Header und einsatzbereiten Code-Snippets für Express.js, Nginx, Apache, Django, FastAPI, Flask und Go. Echtzeit-Validierung erkennt häufige CORS-Fehlkonfigurationen, bevor sie in die Produktion gelangen.

Nutzung

Konfigurieren Sie Ihre CORS-Richtlinie mit den Formularfeldern: Wählen Sie den Ursprungsmodus (Wildcard, spezifische Ursprünge oder Spiegeln), wählen Sie zulässige HTTP-Methoden, fügen Sie zulässige Header hinzu und aktivieren Sie bei Bedarf Anmeldeinformationen. Das Tool generiert sofort die korrekten Access-Control-\* Header, zeigt Warnungen zur Validierung für häufige Fehler an und bietet kopierfertige Code-Snippets für 7 Server-Frameworks. Verwenden Sie den CORS-Erklärungsbereich für eine schnelle Auffrischung, wie CORS funktioniert.

Funktionen

Visueller CORS-Konfigurator — Legen Sie Access-Control-Allow-Origin (Wildcard, spezifische Ursprünge oder Spiegeln), Methoden (GET/POST/PUT/PATCH/DELETE/OPTIONS/HEAD), benutzerdefinierte Header, Anmeldeinformationen, max-age und expose-headers fest.
Echtzeit-Header-Generierung — Sehen Sie, wie sich die vollständigen CORS-Antwort-Header und Preflight-Header (OPTIONS) sofort ändern, während Sie konfigurieren.
7 Server-Framework-Snippets — Kopierfertiger Code für Express.js, Nginx, Apache (.htaccess), Django (django-cors-headers), FastAPI (CORSMiddleware), Flask (flask-cors) und Go (net/http). Jedes Snippet wird dynamisch aus Ihrer Konfiguration generiert.
Konfigurationsvalidierung — Farblich gekennzeichnete Warnungen erkennen häufige CORS-Fehler: Wildcard + Anmeldeinformationen (ungültig), fehlender Content-Type-Header bei POST, fehlende OPTIONS-Methode für Preflight, kurzes Max-Age erhöht Preflight-Traffic.
Schnell-Hinzufügen-Header-Schaltflächen — Ein-Klick-Schaltflächen für gängige Header: Content-Type, Authorization, X-Requested-With, Accept, Origin.
Preflight-Header — Separate Anzeige von Preflight-Antwort-Headern (OPTIONS), wenn diese von normalen CORS-Headern abweichen.
CORS-Erklärer — Einklappbare Referenz, die einfache vs. Preflight-Anfragen, was Preflight auslöst, die Rolle jedes Headers und warum Anmeldeinformationen + Wildcard ungültig sind, abdeckt.

Erklärte CORS-Header

Access-Control-Allow-Origin: Welche Ursprünge auf die Ressource zugreifen dürfen. Wildcard (*) erlaubt alle, oder geben Sie genaue Ursprünge an.
Access-Control-Allow-Methods: Welche HTTP-Methoden für Cross-Origin-Anfragen zulässig sind.
Access-Control-Allow-Headers: Welche Anfrage-Header der Client senden darf.
Access-Control-Allow-Credentials: Ob der Browser Cookies/Authentifizierung einschließen soll. Kann nicht mit Wildcard-Ursprung verwendet werden.
Access-Control-Max-Age: Wie lange (Sekunden) Browser Preflight-Ergebnisse cachen.
Access-Control-Expose-Headers: Welche Antwort-Header der Browser von JavaScript aus zugreifen kann.

ANZEIGE Entfernen?

Was ist CORS und warum brauche ich es?

CORS (Cross-Origin Resource Sharing) ist ein Sicherheitsmechanismus des Browsers, der steuert, welche Websites Anfragen an Ihren Server stellen dürfen. Standardmäßig blockieren Browser Cross-Origin-Anfragen (z. B. Ihr Frontend unter app.example.com, das Ihre API unter api.example.com aufruft). CORS-Header teilen dem Browser mit, welche Ursprünge, Methoden und Header zulässig sind. Ohne korrekte CORS-Konfiguration funktioniert Ihre API von Server zu Server, schlägt jedoch fehl, wenn sie von einem Browser aus aufgerufen wird – eines der häufigsten Probleme in der Webentwicklung.

Warum kann ich Wildcard (*) nicht mit Anmeldeinformationen verwenden?

Wenn Access-Control-Allow-Credentials true ist, verlangt der Browser vom Server, dass er den genauen Ursprung angibt – nicht Wildcard (*). Dies ist eine Sicherheitsmaßnahme: Wenn ein Server sagt, dass ein beliebiger Ursprung auf diese Ressource mit Anmeldeinformationen (Cookies, Auth-Tokens) zugreifen kann, würde dies jeder Website ermöglichen, authentifizierte Anfragen im Namen des Benutzers zu stellen. Browser erzwingen diese Einschränkung, um den Diebstahl von Anmeldeinformationen zu verhindern. Verwenden Sie stattdessen den Modus „Ursprung spiegeln“ – der Server liest den Origin-Header der Anfrage und gibt ihn zurück, wenn er in der zulässigen Liste enthalten ist.

Was ist eine Preflight-Anfrage?

Eine Preflight-Anfrage ist eine automatische OPTIONS-Anfrage, die der Browser vor bestimmten Cross-Origin-Anfragen sendet, um zu prüfen, ob der Server diese zulässt. Preflight wird ausgelöst, wenn: die Anfrage Methoden außer GET/HEAD/POST verwendet, benutzerdefinierte Header (wie Authorization) enthält oder Content-Type-Werte außer Formular-Daten oder Nur-Text verwendet. Der Server muss auf OPTIONS mit den entsprechenden Access-Control-\* Headern antworten. Wenn das Preflight fehlschlägt, blockiert der Browser die eigentliche Anfrage. Der Access-Control-Max-Age-Header steuert, wie lange Browser Preflight-Ergebnisse cachen.

Welches Server-Framework-Snippet sollte ich verwenden?

Wählen Sie basierend auf Ihrer Backend-Technologie: Express.js für Node.js-APIs, Nginx für Reverse-Proxy/statische Dateiserver, Apache für traditionelles Hosting (.htaccess), Django für Python-Django-Projekte (verwendet das Paket django-cors-headers), FastAPI für moderne Python-APIs (integriertes CORSMiddleware), Flask für Python-Flask-Anwendungen (verwendet flask-cors) und Go für Go net/http-Server. Jedes Snippet wird aus Ihrer genauen Konfiguration generiert – kopieren Sie es einfach in Ihr Projekt. Für containerisierte Bereitstellungen müssen Sie CORS möglicherweise auf der Ebene des Reverse-Proxys (Nginx/Apache) und nicht auf Anwendungsebene konfigurieren.

CORS-Header-Builder & Validator

Führung