CORS Header Generator

CORS (Cross-Origin Resource Sharing) ist ein Browser-Sicherheitsmechanismus, der steuert, welche Websites Anfragen an Ihre API oder Ihren Server senden dürfen. Standardmäßig blockieren Browser Anfragen von einer Origin (Domain, Protokoll oder Port) zu einer anderen - dies wird Same-Origin-Policy genannt. CORS-Header teilen dem Browser mit, welche Cross-Origin-Anfragen erlaubt sind.

Wenn Sie jemals den Fehler Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy gesehen haben, müssen Sie CORS-Header auf Ihrem Server konfigurieren. Dies beinhaltet die richtige Kombination von Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers und verwandten Headern.

Dieser CORS-Header-Generator ermöglicht es Ihnen, Ihre CORS-Policy interaktiv zu konfigurieren und generiert einsatzbereite Konfiguration für Express.js, nginx, Apache, Next.js Middleware, Vercel und Flask. Er enthält Sicherheitswarnungen für häufige Fehlkonfigurationen wie die Verwendung von Wildcard-Origins mit Credentials. Die gesamte Konfiguration findet in Ihrem Browser statt.

1. Preset wählen oder neu starten — Wählen Sie aus Presets wie "Allow All (Dev)", "Single Origin", "Multiple Origins" oder "API with Auth" für eine gängige Ausgangskonfiguration.
2. Erlaubte Origins konfigurieren — Wählen Sie Wildcard (*) für die Entwicklung oder fügen Sie spezifische Origins hinzu (wie https://app.example.com) für die Produktion. Mehrere Origins werden unterstützt.
3. HTTP-Methoden auswählen — Schalten Sie ein, welche HTTP-Methoden (GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD) Ihre API von Cross-Origin-Anfragen akzeptieren soll.
4. Erlaubte und exponierte Header setzen — Konfigurieren Sie, welche Request-Header akzeptiert werden (Allow-Headers) und welche Response-Header dem Browser lesbar gemacht werden (Expose-Headers).
5. Credentials und Max-Age konfigurieren — Aktivieren Sie Credentials-Unterstützung für Cookie-basierte Auth und setzen Sie die Preflight-Cache-Dauer, um OPTIONS-Anfragen zu reduzieren.
6. Ausgabe kopieren — Wechseln Sie zwischen Ausgabe-Tabs (Raw Headers, Express.js, nginx, Apache, Next.js, Vercel, Flask) und kopieren Sie die Konfiguration für Ihren Server.

• Multi-Plattform-Ausgabe — Generiert CORS-Konfiguration für Express.js (cors Middleware), nginx (add_header), Apache (Header set), Next.js (middleware.ts), Vercel (vercel.json) und Flask (flask-cors).
• Sicherheitswarnungen — Echtzeit-Warnungen für gefährliche Konfigurationen wie Wildcard-Origin mit Credentials, fehlende OPTIONS-Methode für Preflight oder Wildcard in der Produktion.
• Mehrere Origins unterstützen — Konfigurieren Sie mehrere erlaubte Origins mit korrekter Vary-Header-Behandlung. Die nginx-Ausgabe verwendet einen Map-Block für effiziente Multi-Origin-Unterstützung.
• Schnelle Presets — Vier Presets decken gängige Szenarien ab: Entwicklung (alles erlauben), einzelne Origin, mehrere Origins und API mit Authentifizierung.
• Benutzerdefinierte Header — Fügen Sie benutzerdefinierte erlaubte Header und exponierte Header über die gängigen (Content-Type, Authorization, etc.) hinaus hinzu.
• 100% clientseitig — Ihre CORS-Konfiguration wird vollständig in Ihrem Browser generiert. Keine Serverkommunikation erforderlich.

• API-Server-Setup — Konfigurieren Sie CORS für Ihre REST API oder Ihren GraphQL-Server, um Anfragen von Ihrer Frontend-Anwendung auf einer anderen Domain zu erlauben.
• Entwicklungsumgebungen — Richten Sie permissive CORS-Einstellungen für die lokale Entwicklung ein, wenn Ihr Frontend (localhost:3000) und Ihre API (localhost:8080) auf verschiedenen Ports laufen.
• Microservices-Architektur — Konfigurieren Sie CORS für API-Gateways und Microservices, die Anfragen von mehreren Frontend-Anwendungen akzeptieren müssen.
• Drittanbieter-Integrationen — Richten Sie CORS ein, um bestimmten Partner-Domains API-Anfragen zu erlauben, wie Webhook-Callbacks oder eingebettete Widgets.
• CORS-Probleme debuggen — Generieren Sie die korrekte Header-Konfiguration, um "blocked by CORS policy"-Fehler in Ihrer Browser-Konsole zu beheben.