CORS-Header Konfigurieren

Name: CORS-Header Konfigurieren
Author: Kitmul

Generieren Sie Cross-Origin Resource Sharing Konfigurationen für 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 für 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 können, indem Sie Ursprungs-URLs hinzufügen oder einen Platzhalter für offenen Zugang verwenden.

Methoden und Header auswählen

Wählen 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 für Ihr Server-Framework oder Reverse-Proxy-Setup zu kopieren.

Guide

Vollständiger Leitfaden zur CORS-Konfiguration

Warum CORS im Browser existiert

Browser setzen die Same-Origin-Policy durch, um zu verhindern, dass bösartige Websites sensible Daten von anderen Domains lesen. CORS lockert diese Einschränkung kontrolliert, indem Server deklarieren können, 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.

Häufige 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 tatsächlichen Client-Ursprung.

Sources

Examples

CORS-Konfigurationsbeispiele

Express.js-API für 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 hinzufügen

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 für öffentliche API

Eine öffentliche 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 hinzufügen

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-Anwendungsfälle

Öffentliche REST-API

“Setzen Sie erlaubte Ursprunge auf Platzhalter (*) und aktivieren Sie die Methoden GET und POST für eine öffentliche API. Dies ermöglicht jeder Frontend-Anwendung, Ihre Endpoints ohne Einschränkungen zu nützen, ideal für offene Datendienste und öffentliche Dokumentations-APIs.”

Backend für Single-Page-Anwendung

“Beschränken Sie erlaubte Ursprunge auf die Domain Ihrer SPA und aktivieren Sie Anmeldedaten für 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 für interne Dienste hinter einem Reverse-Proxy. Legen Sie spezifische Methoden und exponierte Header fest, damit jeder Microservice über das Gateway kommunizieren kann, während nicht autorisierte externe Ursprunge blockiert werden.”

Häufig gestellte Fragen

?Was ist CORS?

CORS ist ein Browser-Sicherheitsmechanismus, der über HTTP-Header steuert, welche externen Domains auf Ressourcen Ihres Servers zugreifen können.

?Warum erhalte ich CORS-Fehler?

Browser blockieren Cross-Origin-Anfragen standardmassig. Sie müssen 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 müssen 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 prüfen, 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 läuft lokal in Ihrem Browser. Es werden keine Daten an einen Server gesendet. Ihre CORS-Konfiguration verlässt nie Ihren Rechner.

?Ist dieses Tool kostenlos?

Ja. Völlig kostenlos ohne Limits, keine Registrierung erforderlich. Generieren Sie so viele Konfigurationen wie nötig ohne Einschränkungen.

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 Bücher über Web-Sicherheit und CORS

Erweitern Sie Ihre Fähigkeiten

Sicherheitstools für Webentwickler

YubiKey 5 NFC — Hardware-Sicherheitsschlussel für MFA