Warum Localhost immer noch CORS-Fehler auslöst
Du lässt dein Frontend auf localhost:3000 laufen. Du lässt dein Backend auf localhost:5000 laufen. Beide Apps befinden sich auf deinem Laptop. Dennoch siehst du einen CORS-Fehler.
Das liegt daran, wie Browser eine Origin definieren.
Eine Origin besteht aus drei Teilen:
- Protokoll
- Domain
- Port
Vergleiche diese beiden:
Sie nutzen dasselbe Protokoll. Sie nutzen dieselbe Domain. Sie nutzen unterschiedliche Ports.
Browser betrachten unterschiedliche Ports als unterschiedliche Origins.
Wenn deine React-App deine API aufruft, erkennt der Browser eine Cross-Origin-Anfrage. Er betrachtet sie als zwei separate Einheiten.
Warum gibt es diese Regel? Sicherheit.
Wenn Websites jede API frei aufrufen könnten, könnte eine bösartige Website:
- Deine Bankdaten auslesen.
- Auf private APIs zugreifen.
- In deinem Namen handeln.
Browser nutzen die Same-Origin-Policy, um dies zu verhindern. Website A kann nicht auf Website B zugreifen, es sei denn, Website B erlaubt es.
CORS steht für Cross-Origin Resource Sharing. Es ist eine Möglichkeit für deinen Server, dem Browser mitzuteilen: „Ich vertraue Anfragen von dieser spezifischen Origin.“
Du behebst dies, indem du deinem Backend einen Header hinzufügst: Access-Control-Allow-Origin: http://localhost:3000
Dies teilt dem Browser mit, dass die Anfrage sicher ist.
Ein häufiger Grund für Verwirrung: Du siehst, dass die Anfrage in deinen Backend-Logs erscheint, aber das Frontend schlägt fehl.
Das passiert, weil:
- Das Frontend sendet die Anfrage.
- Das Backend empfängt die Anfrage erfolgreich.
- Das Backend sendet die Antwort erfolgreich.
- Der Browser erhält die Antwort und blockiert sie aufgrund von Sicherheitsregeln.
Der Fehler ist ein Sicherheitsfeature des Browsers.
Tools wie Postman oder cURL funktionieren, weil sie keine Browser sind. Sie erzwingen keine Browser-Sicherheitsrichtlinien.
Der Browser ignoriert die Tatsache, dass beide Apps auf deinem Rechner laufen. Er kümmert sich nur um die Origin.