CORS-Fehler im Browser: Ursachen und Lösungen für Entwickler

So erkennen Sie das Problem

• In der Browserkonsole steht: "Access to fetch at ... has been blocked by CORS policy"
• Der API-Aufruf funktioniert in Postman oder curl, aber nicht im Browser
• Die Netzwerkanfrage hat den Status 0 oder (failed) im Tab Network
• Tritt nur auf dem lokalen Entwicklungsserver auf, nicht in der Produktion
• Der Fehler tritt nach dem Hinzufügen einer neuen Domain oder Subdomain auf

Häufigste Ursachen

Lösung Schritt für Schritt

1. 1

   Überprüfen Sie den genauen Origin im Browser

   Öffnen Sie die DevTools (F12) und geben Sie in der Konsole location.origin ein. Notieren Sie den genauen Wert, zum Beispiel http://localhost:3000. Suchen Sie im Tab Network die fehlgeschlagene Anfrage und sehen Sie sich die Anfrage- und Antwort-Header an. Achten Sie auf Origin in der Anfrage und Access-Control-Allow-Origin in der Antwort.

2. 2

   Konfigurieren Sie CORS auf dem Server

   Erlauben Sie im Backend explizit den Origin des Frontends. In Node.js/Express: app.use(cors({ origin: 'http://localhost:3000', credentials: true })). In Spring Boot: @CrossOrigin(origins = "http://localhost:3000") oder globale Konfiguration. In ASP.NET Core: builder.Services.AddCors(...) und app.UseCors(...). Geben Sie immer den genauen Origin an, nicht *, wenn Sie Credentials verwenden.

3. 3

   Behandeln Sie OPTIONS-Preflight

   Überprüfen Sie, ob der Server auf OPTIONS-Anfragen mit 204 oder 200 und den Headern Access-Control-Allow-Methods und Access-Control-Allow-Headers antwortet. In Express erledigt das die cors-Middleware automatisch. In Nginx fügen Sie add_header Access-Control-Allow-Origin ... und if ($request_method = OPTIONS) { return 204; } hinzu.

4. 4

   Verwenden Sie einen Proxy während der lokalen Entwicklung

   Wenn Sie den Server nicht ändern können, konfigurieren Sie einen Proxy im Entwicklungstool. In Vite: server.proxy in vite.config.js. In Create React App: das Feld proxy in package.json. Rufen Sie dann die API über einen relativen Pfad (/api/...) statt der vollständigen URL auf.

5. 5

   Vermeiden Sie CORS in der Produktion

   Die beste Lösung ist, dass Frontend und API denselben Origin haben (gleiche Domain und gleicher Port). Wenn nicht, verwenden Sie einen Reverse Proxy, der /api an das Backend weiterleitet. So sendet der Browser keine Cross-Origin-Anfrage.

6. 6

   Überprüfen Sie Proxy- und Hosting-Konfiguration

   Wenn Sie Nginx, Apache oder Cloud-Hosting verwenden, stellen Sie sicher, dass CORS-Header nicht entfernt werden. In Nginx verwenden Sie proxy_pass und add_header auf der richtigen Ebene. Auf Serverless-Plattformen (Vercel, Netlify) konfigurieren Sie CORS in den Antwort-Headern der Funktionen oder in der entsprechenden Konfiguration.

7. 7

   Testen Sie mit curl

   Simulieren Sie den Preflight: curl -i -X OPTIONS http://localhost:8080/api/podaci -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: GET". Überprüfen Sie, ob die Antwort Access-Control-Allow-Origin und Access-Control-Allow-Methods enthält. Wenn nicht, liegt das Problem auf dem Server.

8. 8

   Leeren Sie den Cache und laden Sie neu

   Browser können Preflight-Antworten gemäß dem Header Access-Control-Max-Age zwischenspeichern. Warten Sie, bis er abläuft, starten Sie den Browser neu oder verringern Sie vorübergehend diesen Wert auf dem Server. Aktivieren Sie in den DevTools "Disable cache" und aktualisieren Sie die Seite. Manchmal ist ein Neustart des Entwicklungsservers erforderlich, damit Konfigurationsänderungen wirksam werden.

Wenn nichts hilft: erweiterte Überprüfungen

So beugen Sie vor

• Definieren Sie eine Liste der erlaubten Origins in der Serverkonfiguration und aktualisieren Sie sie bei jeder Domainänderung.
• Verwenden Sie nach Möglichkeit denselben Origin für Frontend und API oder einen Reverse Proxy.
• Testen Sie das CORS-Verhalten mit automatisierten Tests oder curl vor der Veröffentlichung.
• Vermeiden Sie `*` für `Access-Control-Allow-Origin`, wenn Sie Credentials verwenden.

Häufige Fragen