CORS-Header-Builder

CORS-Antwortheader mit Origin, Methoden, Credentials und mehr erstellen

Was ist das und wie funktioniert es?

Cross-Origin Resource Sharing (CORS) ist ein Browser-Sicherheitsmechanismus, der Webseiten davon abhält, HTTP-Anfragen an eine andere Domain zu stellen als jene, die die Seite geliefert hat. Wenn JavaScript auf `app.example.com` Daten von `api.example.com` abruft, sendet der Browser zunächst eine Preflight-OPTIONS-Anfrage.

Dieses Tool generiert die korrekten CORS-HTTP-Antwortheader für Ihren Anwendungsfall: Entwicklung (alle Origins erlauben), Produktion (nur bestimmte Origins), credentialed Requests und komplexe Preflight-Konfigurationen.

Anwendungsfälle

• Express.js-API: CORS-Middleware hinzufügen, damit das Frontend auf `https://app.mysite.com` die API auf `https://api.mysite.com` mit Credentials aufrufen kann.
• Nginx-CORS-Konfiguration: `add_header`-Direktiven für einen statischen Dateiserver hinzufügen, um Anfragen von bestimmten Origins zu erlauben.
• CORS-Fehler debuggen: Die generierten Header verwenden, um zu verstehen, was der Browser erwartet.

Häufige Fragen

Warum sendet der Browser eine Preflight-OPTIONS-Anfrage?

Für "nicht einfache" Anfragen (mit anderen Methoden als GET/POST oder mit benutzerdefinierten Headern) sendet der Browser zuerst eine OPTIONS-Anfrage. Bei Erfolg fährt der Browser mit der eigentlichen Anfrage fort.

Kann ich `Access-Control-Allow-Origin: *` mit Credentials verwenden?

Nein. `Access-Control-Allow-Origin: *` kann nicht mit `Access-Control-Allow-Credentials: true` kombiniert werden. Für credentialed Requests muss der genaue Origin angegeben werden.

Was ist der Unterschied zwischen CORS-Fehlern und Netzwerkfehlern?

CORS-Fehler: Anfrage hat den Server erreicht, der Browser blockiert JavaScript beim Lesen der Antwort. Netzwerkfehler: Anfrage hat den Server nie erreicht.

Wie behebe ich CORS für mehrere erlaubte Origins?

Der `Access-Control-Allow-Origin`-Header kann nur einen einzigen Wert oder `*` enthalten. Für mehrere Origins serverseitige Logik verwenden: Origin-Header prüfen und bei Übereinstimmung reflektieren.

Entwickler

UUID-Generator · Zeitstempel-Konverter · Base64-Encoder · Base64-Decoder · Hash-Generator · Farb-Konverter