CORS und Laravel Authentication endlich gelöst — Christian Bachmann

Wenn du dich mit einer Laravel-Backend-API und einer JavaScript-Frontend-Anwendung beschäftigst, die Token-Authentifizierung verwendet, bist du bestimmt schon auf das berüchtigte CORS-Problem gestossen. Falls du gerade verzweifelst, weil dein Token-Request ständig mit einem CORS-Fehler abgelehnt wird, dann bist du hier genau richtig!

Nach verzweifelter Fehlersuche habe ich endlich die richtige Lösung gefunden und möchte sie hier teilen — damit du (und auch ich in Zukunft) nicht erneut ins CORS-Chaos stürzen.

Die Ausgangslage

• Eine Laravel-Backend-Anwendung
• Ein JavaScript-Frontend mit Token-Authentifizierung
• Der Token-Request führt ständig zu einem CORS Error

Die Lösung in drei Schritten

1. CORS-Einstellungen überprüfen

Als Erstes muss man sicherstellen, dass die CORS-Einstellungen in Laravel richtig konfiguriert sind. Dazu sollte man die CORS-Konfigurationsdatei unter config/cors.php verifizieren.

Falls diese Datei nicht vorhanden ist, kann sie mit folgendem Befehl generiert werden:

php artisan config:publish cors

Nach dem Ausführen dieses Befehls findest du die Datei unter config/cors.php.

2. Die richtige Konfiguration vornehmen

In der Datei config/cors.php sind zwei zentrale Punkte anzupassen:

1. Anmeldedaten unterstützen:Stelle sicher, dass die Option supports_credentials auf true gesetzt ist:'supports_credentials' => true,
2. Pfad-Erweiterungen:Laravel behandelt Standard-API-Routen unter api/*. Wenn deine Token-Anfragen jedoch andere Endpunkte wie sanctum/csrf-cookie oder oauth/* nutzen, müssen diese Pfade explizit in der Konfiguration aufgenommen werden:'paths' => ['api/*', 'sanctum/csrf-cookie', 'oauth/*'],Das war in meinem Fall der grösste Stolperstein!

3. Cache leeren und Einstellungen anwenden

Laravel verwendet ein Konfigurations-Caching, daher muss nach der Änderung der Einstellungen der Cache geleert und optimiert werden:

php artisan optimize

Und siehe da: Schwups, und es läuft!

Fazit

Wenn dein Token-Request also nicht funktioniert, obwohl du sicher bist, dass alles korrekt implementiert ist, überprüfe nochmals die CORS-Einstellungen. Ein kleines Detail in der paths-Konfiguration kann der entscheidende Unterschied sein!

Und denk immer daran: CORS ist wie ein strenger Türsteher — entweder stehst du auf der Liste oder du bleibst draussen.

Ich hoffe, dieser Beitrag hilft dir, zukünftige CORS-Probleme schneller zu lösen. Happy Coding!

Originally published at https://www.christianbachmann.ch on January 26, 2025.