CORS-Header Konfigurieren

Name: CORS-Header Konfigurieren
Author: Kitmul

Generieren Sie Cross-Origin Resource Sharing Konfigurationen fur Express.js, Nginx, Apache, Fetch API, Spring Boot, Django und Laravel.

Erstellen und konfigurieren Sie CORS-Header visuell mit einem interaktiven Editor. Definieren Sie erlaubte Ursprunge, Methoden, Header, Anmeldedaten und maximale Dauer; exportieren Sie dann einsatzbereite Konfigurationen fur Express.js, Nginx, Apache, Fetch API, Spring Boot, Django und Laravel. Die gesamte Verarbeitung erfolgt in Ihrem Browser.

Erlaubte Ursprunge

http://localhost:3000

Erlaubte Methoden

Erlaubte Header

Content-TypeAuthorization

Exponierte Header

Anmeldedaten

Maximale Dauer (Sekunden)

Ausgabe

const cors = require('cors');

app.use(cors({
  origin: ['http://localhost:3000'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 86400
}));

Deine Daten bleiben in deinem Browser

War dieses Tool hilfreich?

Dieses Tool bewerten

Anleitung

So konfigurieren Sie CORS-Header

Erlaubte Ursprunge definieren

Geben Sie an, welche Domains auf Ihre API zugreifen konnen, indem Sie Ursprungs-URLs hinzufugen oder einen Platzhalter fur offenen Zugang verwenden.

Methoden und Header auswahlen

Wahlen Sie, welche HTTP-Methoden wie GET, POST oder PUT erlaubt sind, und definieren Sie benutzerdefinierte Header, die Ihre API akzeptiert.

Konfiguration exportieren

Wechseln Sie zwischen den Ausgabe-Tabs, um die CORS-Konfiguration fur Ihr Server-Framework oder Reverse-Proxy-Setup zu kopieren.

Guide

Vollstandiger Leitfaden zur CORS-Konfiguration

Warum CORS im Browser existiert

Browser setzen die Same-Origin-Policy durch, um zu verhindern, dass bosartige Websites sensible Daten von anderen Domains lesen. CORS lockert diese Einschrankung kontrolliert, indem Server deklarieren konnen, welche Ursprunge, Methoden und Header erlaubt sind. Ohne CORS-Header wird jede Cross-Origin-Fetch- oder XMLHttpRequest blockiert, selbst wenn der Server die Anfrage erfolgreich verarbeitet hat.

CORS-Header verstehen

Der Header Access-Control-Allow-Origin gibt vertrauenswurdige Ursprunge an. Access-Control-Allow-Methods listet erlaubte HTTP-Methoden wie GET, POST und DELETE auf. Access-Control-Allow-Headers deklariert, welche benutzerdefinierten Anfrage-Header akzeptiert werden. Access-Control-Expose-Headers steuert, welche Antwort-Header der Browser lesen kann, und Access-Control-Max-Age speichert Preflight-Ergebnisse zwischen.

Einfache vs. Preflight-Anfragen

Einfache Anfragen verwenden GET, HEAD oder POST mit Standard-Inhaltstypen und uberspringen den Preflight-Schritt. Jede Anfrage mit anderen Methoden, benutzerdefinierten Headern oder Nicht-Standard-Inhaltstypen lost einen Preflight-OPTIONS-Aufruf aus. Der Server muss auf den Preflight mit den richtigen CORS-Headern antworten, bevor der Browser die eigentliche Anfrage sendet.

Haufige Fallstricke und Best Practices

Vermeiden Sie Platzhalter-Ursprunge in der Produktion; verwenden Sie stattdessen eine Whitelist spezifischer Domains. Kombinieren Sie nie Platzhalter-Ursprunge mit Anmeldedaten, da Browser die Antwort ablehnen werden. Setzen Sie ein vernunftiges Max Age, um den Preflight-Overhead zu reduzieren, ohne veraltete Richtlinien zwischenzuspeichern. Testen Sie CORS immer vom tatsachlichen Client-Ursprung.

Sources

Examples

CORS-Konfigurationsbeispiele

Express.js-API fur eine React-App

Eine React-SPA unter https://app.example.com muss eine Express-API unter https://api.example.com mit JWT-Tokens aufrufen.

Erlaubten Ursprung auf https://app.example.com setzen

Methoden GET, POST, PUT, DELETE aktivieren

Authorization zu den erlaubten Headern hinzufugen

Anmeldedaten aktivieren

Access-Control-Allow-Origin: https://app.example.com; Access-Control-Allow-Methods: GET, POST, PUT, DELETE; Access-Control-Allow-Headers: Authorization; Access-Control-Allow-Credentials: true

Nginx Reverse-Proxy fur offentliche API

Eine offentliche REST-API hinter Nginx, die JSON-Anfragen von jedem Ursprung akzeptiert.

Erlaubten Ursprung auf * setzen

Methoden GET, POST, OPTIONS aktivieren

Content-Type zu den erlaubten Headern hinzufugen

Maximale Dauer auf 86400 Sekunden setzen

Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS; Access-Control-Allow-Headers: Content-Type; Access-Control-Max-Age: 86400

Anwendungsfälle

CORS-Anwendungsfalle

Offentliche REST-API

“Setzen Sie erlaubte Ursprunge auf Platzhalter (*) und aktivieren Sie die Methoden GET und POST fur eine offentliche API. Dies ermoglicht jeder Frontend-Anwendung, Ihre Endpoints ohne Einschrankungen zu nutzen, ideal fur offene Datendienste und offentliche Dokumentations-APIs.”

Backend fur Single-Page-Anwendung

“Beschranken Sie erlaubte Ursprunge auf die Domain Ihrer SPA und aktivieren Sie Anmeldedaten fur Cookie-basierte Authentifizierung. Dies stellt sicher, dass nur Ihr Frontend die API aufrufen kann und gleichzeitig den Sitzungszustand bei Cross-Origin-Anfragen sicher beibehalt.”

Microservices-Gateway

“Konfigurieren Sie mehrere erlaubte Ursprunge fur interne Dienste hinter einem Reverse-Proxy. Legen Sie spezifische Methoden und exponierte Header fest, damit jeder Microservice uber das Gateway kommunizieren kann, wahrend nicht autorisierte externe Ursprunge blockiert werden.”

Haufig gestellte Fragen

?Was ist CORS?

CORS ist ein Browser-Sicherheitsmechanismus, der uber HTTP-Header steuert, welche externen Domains auf Ressourcen Ihres Servers zugreifen konnen.

?Warum erhalte ich CORS-Fehler?

Browser blockieren Cross-Origin-Anfragen standardmassig. Sie mussen Ihren Server konfigurieren, um die richtigen Access-Control-Allow-Header zu senden.

?Kann ich den Platzhalter (*) mit Anmeldedaten verwenden?

Nein. Browser lehnen Antworten ab, die Access-Control-Allow-Origin: * mit Anmeldedaten kombinieren. Sie mussen genaue Ursprunge angeben.

?Was ist eine Preflight-Anfrage?

Ein Preflight ist eine OPTIONS-Anfrage, die der Browser vor bestimmten Cross-Origin-Aufrufen sendet, um zu prufen, ob der Server die eigentliche Anfrage erlaubt.

?Was steuert Max Age?

Max Age teilt Browsern mit, wie lange Preflight-Antworten in Sekunden zwischengespeichert werden sollen, um wiederholte OPTIONS-Anfragen zu reduzieren.

?Sind meine Daten privat?

Ja. Alles lauft lokal in Ihrem Browser. Es werden keine Daten an einen Server gesendet. Ihre CORS-Konfiguration verlasst nie Ihren Rechner.

?Ist dieses Tool kostenlos?

Ja. Vollig kostenlos ohne Limits, keine Registrierung erforderlich. Generieren Sie so viele Konfigurationen wie notig ohne Einschrankungen.

Hilf uns besser zu werden

Wie gefällt Ihnen dieses Tool?

Jedes Tool bei Kitmul wird auf Basis echter Nutzeranfragen gebaut. Ihre Bewertung und Ihre Vorschläge helfen uns, Bugs zu beheben, fehlende Funktionen hinzuzufügen und die Tools zu bauen, die Sie wirklich brauchen.

Empfohlene Bucher uber Web-Sicherheit und CORS

Erweitern Sie Ihre Fähigkeiten

Sicherheitstools fur Webentwickler

YubiKey 5 NFC — Hardware-Sicherheitsschlussel fur MFA