Laravel erreur CORS, comment la corriger ?

Les CORS (Cross-Origin Resource Sharing) est un système qui permets de savoir qui peut accéder aux données de votre back Laravel (voir d’autres framework que ce soit Symfony ou Nodejs etc c’est le même principe).

Problème des CORS

Le problème est que lorsque vous souhaitez accéder aux données de votre API via un framework front par exemple React ou Vue, votre API vous rejette avec une erreur de cross-origin, cela vient du fait que votre back n’a pas été configuré pour comprendre que vous avez le droit via votre front, d’accéder aux données que le back fourni.

La solution aux problèmes de CORS

La solution la plus rapide pour corriger les problèmes de CORS et qui ne nécessite pas d’installer un package externe est celle-ci :

Ajoutez ce bout de code en haut de votre fichier Laravel qui contient vos routes à appeler.


header('Access-Control-Allow-Origin:  *');
header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');

Cela ajoutera les headers nécessaire pour que votre back accepte tout le temps et pour chaque méthode HTTP, gros soucis une fois en production par exemple n’importe qui pourra accéder à votre back. Si vous souhaitez sécuriser le back il faut ajouter l’url de votre front à la place du “*”, comme ceci :

header('Access-Control-Allow-Origin:  http://localhost:8080');

Vous vous assurez donc que seulement votre front à cette adresse pourra accéder aux données, les personnes qui chercheront à accéder à vos données via d’autres url recevront une erreur CORS.

Package qui gère les CORS

Il existe un package qui gère les CORS, c’est une manière plus propre que de coller directement les headers dans votre fichier.

Gérer les CORS via le package fruitcake sous Laravel 8