jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

GitHub-Pages-Tools

Kostenlose CORS Header Generator

Erstelle CORS-HTTP-Header für jede Origin-, Methoden- und Credential-Konfiguration.

Tool wird geladen...

Was ist CORS Header Generator?

CORS (Cross-Origin Resource Sharing) ist ein Browser-Sicherheitsmechanismus, der steuert, welche Web-Urspr眉nge auf Ihre Ressourcen zugreifen können. Wenn eine Browser-App versucht, Daten von einer anderen Domain abzurufen, überprüft der Browser die CORS-Header in der Antwort. Ohne korrekte CORS-Header schlagen Cross-Origin-Anfragen mit einem CORS-Fehler in der Konsole fehl.

Kurze Antwort

CORS-Header steuern, welche Websites von Browser-JavaScript aus auf Ihre Serverressourcen zugreifen können. Verwenden Sie Access-Control-Allow-Origin, um erlaubte Urspr眉nge anzugeben, Access-Control-Allow-Methods für HTTP-Verben und Access-Control-Allow-Credentials für cookie-basierte Authentifizierung. Kombinieren Sie niemals den *-Wildcard-Ursprung mit Anmeldeinformationen.

Last updated: 2026-05-28

Einschränkungen

  • CORS schützt nur browserbasierte Anfragen. Server-zu-Server-Anfragen, curl und direkte API-Aufrufe unterliegen nicht CORS —CORS ist ein Browser-Durchsetzungsmechanismus, keine Serversicherheitsschicht.
  • Einige ältere Browser (IE 10 und früher) haben unvollständige CORS-Unterstützung und verarbeiten Preflight-Caching möglicherweise nicht korrekt. Für moderne Web-Apps ist die Browserunterstützung universell.
  • CORS-Header schützen Ihre API nicht vor DDoS, Missbrauch oder unbefugtem Nicht-Browser-Zugriff. Verwenden Sie Authentifizierung, Ratenbegrenzung und eine WAF zusammen mit CORS.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie die erlaubten Urspr眉nge ein —verwenden Sie * für öffentliche APIs oder spezifische Domains für eingeschränkten Zugriff.
  2. Wählen Sie die HTTP-Methoden aus, die Ihr Endpunkt unterstützt, sowie alle benutzerdefinierten Header, die Clients senden dürfen.
  3. Schalten Sie die Anmeldeinformationsunterstützung mit Vorsicht ein —Browser lehnen Anfragen ab, die *-Urspr眉nge mit Anmeldeinformationen kombinieren.
  4. Wählen Sie Ihr Bereitstellungsformat und kopieren Sie die generierte Header-Konfiguration.

Wofür du es nutzen kannst

  • Eine öffentliche API konfigurieren, die jedes Frontend von jeder Domain aus aufrufen kann.
  • Einen privaten API-Endpunkt einrichten, der nur von Ihrer eigenen Frontend-Domain mit cookie-basierter Authentifizierung zugreifbar ist.
  • CORS-Header für einen Cloudflare Worker oder Express.js-Backend mit korrektem Preflight-Caching generieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

Öffentliche schreibgesch眉tzte API

Eine öffentliche JSON-API stellt Daten für jedes Frontend bereit. Setzen Sie origin auf *, erlauben Sie nur GET und aktivieren Sie keine Anmeldeinformationen. Dies ist die einfachste und sicherste CORS-Konfiguration für öffentliche Daten.

Beispiel

Private Admin-API mit Auth-Cookies

Ein Admin-Dashboard unter admin.example.com ruft eine API unter api.example.com mit Sitzungscookies auf. Setzen Sie origin auf admin.example.com, erlauben Sie GET/POST/PUT/DELETE, aktivieren Sie Anmeldeinformationen und verwenden Sie niemals * für den Ursprung.

Haufige Fehler

  • Wildcard-Ursprung (*) zusammen mit Access-Control-Allow-Credentials: true verwenden —Browser lehnen diese Kombination ab.
  • Vergessen, Vary: Origin hinzuzufügen, wenn unterschiedliche CORS-Header basierend auf dem anfragenden Ursprung ausgeliefert werden.
  • Access-Control-Max-Age über 86400 setzen —Browser begrenzen es auf 24 Stunden, unabhängig vom gesetzten Wert.

Überprüfung

  1. Öffnen Sie den Browser-DevTools-Netzwerk-Tab, senden Sie eine Cross-Origin-Anfrage und überprüfen Sie die Antwort-Header auf Access-Control-Allow-Origin und verwandte Header.
  2. Testen Sie mit curl -H 'Origin: https://example.com' -I https://ihre-api.com/endpoint, um eine Cross-Origin-Anfrage zu simulieren und die Access-Control-Header zu überprüfen.

FAQ

Fragen zu CORS Header Generator

Warum erhalte ich einen CORS-Fehler, obwohl die Header korrekt sind?

CORS-Fehler können auch durch Netzwerkprobleme, selbstsignierte Zertifikate während der Entwicklung oder dadurch verursacht werden, dass der Browser die Anfrage blockiert, bevor sie Ihren Server erreicht. Überprüfen Sie die Browserkonsole auf die spezifische CORS-Fehlermeldung und verifizieren Sie, dass die Preflight-OPTIONS-Anfrage einen 2xx-Status zurückgibt. Einige Server-Frameworks geben standardmässig 404 oder 500 für OPTIONS zurück.

Kann ich * für Access-Control-Allow-Origin mit Anmeldeinformationen verwenden?

Nein. Die CORS-Spezifikation verbietet ausdrücklich die Kombination des Wildcard-Ursprungs mit Anmeldeinformationen. Browser lehnen die Antwort ab. Wenn Sie Anmeldeinformationen unterstützen müssen, listen Sie jeden Ursprung explizit auf oder geben Sie dynamisch den anfragenden Ursprung zurück, nachdem Sie ihn gegen eine Zulassungsliste validiert haben.

Was ist eine CORS-Preflight-Anfrage?

Ein Preflight ist eine automatische OPTIONS-Anfrage, die der Browser vor der eigentlichen Anfrage sendet, wenn die Anfrage nicht einfach ist. Anfragen werden preflighted, wenn sie andere Methoden als GET/HEAD/POST verwenden, benutzerdefinierte Header wie Authorization enthalten oder Content-Types außer application/x-www-form-urlencoded, multipart/form-data oder text/plain verwenden. Der Preflight überprüft, ob der Server die beabsichtigte Anfrage erlaubt.

Verwandte Tools

Weitere github-pages-tools

Auch ausprobieren

Auch ausprobieren