CORS erklärt So führen Sie Quell-Übertragungsfehler ohne den Verstand zu verlieren

Sie haben eine fetch-Anfrage erstellt. Die Netzwerk-Option zeigt, dass sie abgefeuert wurde. Doch in der Konsole erscheint eine Wand aus roten Fehlern: Der Zugriff auf fetch an „https://api.example.com“ von der Quelle „https://yourapp.com“ wurde durch die CORS-Richtlinie blockiert.

Bevor wir uns in Erklärungen vertiefen — hier ist der schnellste Diagnoseweg. Öffnen Sie die Entwicklertools → Netzwerk-Option → finden Sie die fehlgeschlagene Anfrage → schauen Sie sich die Antwort-Headeran. Wenn Sie diese nicht sehen, sendet Ihr Server keine CORS-Header. Das ist die Lösung. Der Rest dieses Artikels erklärt genau, was zu senden und warum. Access-Control-Allow-OriginWas CORS tatsächlich ist

CORS — Cross-Origin Resource Sharing — wird vom Browser, nicht von Ihrem Server, erzwungen. Ihr API-Endpunkt blockiert nicht automatisch Quell-Übertragungen. Der Browser tut das auf Verlangen der Benutzer, um zu verhindern, dass Skripte auf

einer anderen Domain Ihre Bankdaten stumm lesen. evil.com Der Browser prüft: „Ist die Antwort von diesem API-Endpunkt so, dass ich weiß, dass diese Quelle es lesen darf?“ Wenn nicht, wird die Antwort blockiert — selbst wenn der Server bereits die Anfrage verarbeitet und eine 200-Rückgabe zurückgegeben hat. Der Server weiß nie, warum der Client sie verworfen hat.

Das ist wichtig beim Debuggen: Der Fehler liegt immer auf der Client-Seite. Der Server muss dem Browser sagen: „Ja, diese Quelle ist erlaubt.“ Das ist genau das, was die CORS-Response-Header tun.

Einfache Anfragen vs. Vorausprüfungsanfragen

Nicht alle Quell-Übertragungsanfragen verhalten sich gleich. Der Browser unterscheidet zwei Arten.

Einfache Anfragen

sind GET- oder POST-Anfragen mit einfachen Text- oder Form-gekodeten Körpern und einer kleinen Menge erlaubter Header. Der Browser sendet sie direkt und prüft die Antwort auf Vorausprüfungsanfragen Access-Control-Allow-Origin.

treten auf, wenn Ihre Anfrage diese Bedingungen nicht erfüllt — zum Beispiel, wenn Sie einen senden, einen benutzerdefinierten Header wie PUT oder DELETEbeinhalten oder Anmeldeinformationen übermitteln. Der Browser startet automatisch eine Authorization oder Content-Type: application/jsonAnfrage an die gleiche URL vor Ihrer tatsächlichen Anfrage. Wenn der Server diese OPTIONS Anfrage nicht mit den richtigen CORS-Header beantwortet, wird Ihre tatsächliche Anfrage nie gesendet. OPTIONS Wenn Sie in Ihrem Netzwerk-Tab

Anfragen sehen, die eine 404 oder 405 zurückgeben, ist das der Grund, warum Ihre Anfragen scheitern. Ihr Server muss für jede Route, die Quell-Übertragungsverkehr empfängt, eine OPTIONS für die Vorausprüfung behandeln. OPTIONS Die wichtigen Header

Um die CORS-Header-Fix zu erhalten, muss man verstehen, was jeder Antwort-Header tatsächlich steuert:

— welche Quellen erlaubt sind, um die Antwort zu lesen. Entweder eine bestimmte Quelle (

• Access-Control-Allow-Origin ) oderhttps://yourapp.comfür jede Quelle. * — welche HTTP-Methoden erlaubt sind (z. B.
• Access-Control-Allow-Methods — welche Anfrage-Header der Browser erlaubt ist (z. B. GET, POST, PUT, DELETE, OPTIONS).
• Access-Control-Allow-Headers — ob Cookies und Auth-Header mit der Anfrage gesendet werden dürfen. Muss explizit sein. Authorization, Content-Type).
• Access-Control-Allow-Credentials — wie lange in Sekunden die Browser die Vorausprüfung-Antwort kacheln soll. true Der Wildcard-Trap
• Access-Control-Max-Age Die Verwendung von

ist die schnellste Möglichkeit, Ihr API-Endpunkt zu öffnen — aber sie bricht, sobald Sie Credentials hinzufügen. Wenn

erforderlich ist, wird der Wildcard von dem Browser abgelehnt. Sie müssen die genaue Quelle angeben: Access-Control-Allow-Origin: * Wenn Sie mehrere erlaubte Quellen haben, lesen Sie den Anfrage-Header „Origin“ und reflektieren Sie ihn bedingt zurück — vermeiden Sie die Kombination. Access-Control-Allow-Credentials: true Häufige CORS-Fehler und was sie bedeuten

# This will fail with credentials:
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

# This works:
Access-Control-Allow-Origin: https://yourapp.com
Access-Control-Allow-Credentials: true

Die Browser-Fehlermeldung sagt Ihnen normalerweise genau, was fehlt. Hier ist ein schneller Referenzpunkt: Origin Fehlermeldung

Was es bedeutet

Wie man es behebt

Kein Header „Access-Control-Allow-Origin“ vorhanden	Der Server hat keine CORS-Header gesendet	an die Antwort
Der Wert des Headers „Access-Control-Allow-Origin“ … stimmt nicht mit der bereitgestellten Quelle überein	Quell-Mismatch — Server hat falsche oder Wildcard-Quelle mit Credentials zurückgegeben	Hinzufügen Access-Control-Allow-Origin Reflektieren Sie den Header „Origin“ der Anfrage bedingt; entfernen Sie das Wildcard, wenn Credentials verwendet werden
Die Methode PUT ist nicht erlaubt durch Access-Control-Allow-Methods	Die HTTP-Methode ist nicht in der erlaubten Methoden-Header aufgeführt	Fügen Sie die fehlende Methode hinzu zu
Der Anfrage-Header „Authorization“ ist nicht erlaubt durch Access-Control-Allow-Headers	Der benutzerdefinierte Header fehlt in der erlaubten Liste	Fügen Sie den Header hinzu zu Access-Control-Allow-Methods
Antwort auf die Vorausprüfung-Anfrage verfehlt die Zugriffskontrolle	Die OPTIONS-Anfrage hat falschen Status oder fehlende Header zurückgegeben	Behandeln Sie OPTIONS explizit; geben Sie 200/204 mit den richtigen Header zurück Access-Control-Allow-Headers
Credentials sind nicht unterstützt, wenn der CORS-Header „Access-Control-Allow-Origin“ ist „*“	Wildcard verwendet mit Credentials-Modus	Ersetzen Sie
durch explizite Quelle; fügen Sie hinzu	Wie man CORS in Express, FastAPI und Nginx konfiguriert	Express (Node.js) * FastAPI (Python) Access-Control-Allow-Credentials: true

Nginx

Achten Sie auf das Nginx-Muster: Sie benötigen

const cors = require('cors');

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

// Handle preflight for all routes
app.options('*', cors());

in beiden der

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://yourapp.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Block und des Hauptblocks. Header, die innerhalb des

location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://yourapp.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 86400;
        add_header 'Content-Length' 0;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' 'https://yourapp.com';
    add_header 'Access-Control-Allow-Credentials' 'true';

    proxy_pass http://backend;
}

Blocks gesetzt werden, werden nicht in den äußeren Block übernommen. add_header Ihr Debugging-Checkliste OPTIONS Wenn Sie einen CORS-Fehler haben, arbeiten Sie nach dieser Reihenfolge: if Lesen Sie die vollständige Fehlermeldung

— sie sagt Ihnen genau, welcher Header oder Wert falsch ist.

Prüfen Sie die Netzwerk-Option

1. — schauen Sie sich die tatsächlichen Antwort-Header an, nicht das, was Sie konfiguriert haben. Prüfen Sie auf eine OPTIONS-Anfrage
2. — wenn sie fehlschlägt oder fehlt, behandelt Ihr Server die Vorausprüfung nicht. Stellen Sie sicher, dass die Quelle genau übereinstimmt
3. — Schlussstriche, HTTP vs HTTPS und Portnummern zählen alle. Entfernen Sie das Wildcard, wenn Sie Credentials verwenden
4. — sie sind miteinander unvereinbar. Stellen Sie sicher, dass Header nicht durch einen Proxy entfernt werden
5. — Nginx und CDNs entfernen manchmal oder überschreiben CORS-Header. Ein leicht verpasster Fall: Wenn Ihr API-Endpunkt hinter einem Reverse-Proxy oder CDN sitzt, kann diese Schicht ihren eigenen Header hinzufügen, der mit dem Header, den Ihr Anwendungsserver zurückgibt, konflikt. Wenn zwei solcher Header in einer Antwort auftreten, lehnt der Browser die ganze Antwort ab. Prüfen Sie immer die Roh-Response-Header auf Netzwerk-Ebene — nicht nur das, was Ihre App-Code emittiert.
6. Ein weiterer Randfall: Einige Frameworks fügen CORS-Header nur zu Routen hinzu, die einem registrierten Handler entsprechen. Wenn Sie eine 404 oder eine unregistrierte Route erreichen, wird das CORS-Middleware möglicherweise nie ausgeführt, und Sie sehen den Fehler „kein Header vorhanden“, obwohl Ihre Konfiguration korrekt aussieht. Testen Sie zuerst mit einem gültigen Endpunkt. Wenn Sie schnell die genauen CORS-Header erzeugen müssen, die Ihr Server zurückgeben sollte, bietet der

IO Tools CORS Headers Builder Access-Control-Allow-Origin eine Konfiguration von Quelle, Methoden und Credentials und gibt Ihnen den korrekten Header-Block bereit, um ihn in Ihre Server-Konfiguration einzufügen.

Ein Hinweis zur Sicherheit

CORS ist kein API-Sicherheitsmechanismus. Die Einstellung von macht Ihr API nicht öffentlich in irgendeiner sinnvollen Angriffsoberfläche — curl, Postman und Server-zu-Server-Anfragen sind nie unter CORS-Beschränkungen. Nur Browser-basierte JavaScript ist betroffen. Wenn Ihr API Authentifizierung benötigt, stellen Sie sie auf API-Ebene mit Tokens oder Sitzungen sicher. CORS-Header sagen nur dem Browser, welche Quellen erlaubt sind, um Antworten von JavaScript zu lesen. Sie sind unabhängig von tatsächlicher Zugriffskontrolle. Mit diesem Kontext können Sie sinnvolle Entscheidungen über Ihre CORS-Konfiguration treffen, anstatt alles zu verschließen aus falscher Sicherheitsbesorgnis oder alles zu öffnen, ohne die Abwägung zu verstehen.

CORS erklärt: So führen Sie Quell-Übertragungsfehler ohne den Verstand zu verlieren 2

CORS erklärt: So führen Sie Quell-Übertragungsfehler ohne den Verstand zu verlieren 1 Access-Control-Allow-Origin: * Sie haben eine fetch-Anfrage erstellt. Die Netzwerk-Option zeigt, dass sie abgefeuert wurde. Doch in der Konsole erscheint eine Wand aus roten Fehlern: Zugriff auf fetch an „https://api.example.com“ von

Mit diesem Kontext können Sie sinnvolle Entscheidungen bezüglich Ihrer CORS-Konfiguration treffen, anstatt alles zu sperren, aus falscher Sicherheitsbesorgnis, oder alles zu öffnen, ohne die Auswirkungen zu verstehen.

Das könnte Ihnen auch gefallen