Résolutions d'erreurs CORS

Histoire 1 : React.js (1 journée de 9h passée à trouver la solution 😒)

Dans des requêtes faites à une API via axios, je tombait pour certaines requêtes (et seulement certaines) sur des blocages CORS. Ce qui était encore plus étrange c'est que tout fonctionnait parfaitement quand mon api était hébergée en local, les problèmes sont apparus quand je l'ai hébergée en ligne.

Bref, après une journée à tester mille et une solutions dont l'ajout des headers Acess-Control[....] dans la config d'Apache (.htaccess et config.d) et côté client en rajoutant des "Access-Control-Allow-Origin": "*" à l'en-tête de mes requêtes; je parviens à faire passer mes requêtes en retirant un slash ( / ) qui trainait à la fin de l'url de ma requête côté client react.

2. Vérifier le sanctum

Si votre application front-end est hébergée sur un domaine différent, assurez-vous de configurer les paramètres CORS dans le fichier config/sanctum.php. Ajoutez votre domaine dans la section stateful :

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1,https://abdoulaye-diallo.com',
        Sanctum::currentApplicationUrlWithPort()
    ))),

3. Vérifier très bien la syntaxe de vos URL

Encore plusieurs jours de perdus car incohérence dans les URL. Revérifier à plusieurs reprises que le front fait bien appel à l'api correctement.

J'avais une erreur car mon front faisait appel à 'https://api.vtcprivetoure.fr/api' alors que je devais appeler 'https://api.vtcprivetoure.fr/api'. ici c'est le sous-domaine api qui m'a induit en erreur.

4. Sur plesk lorsqu'on lance l'application depuis un docker avec un front discossié du back j'ai dû gérer les entêtes CORS depuis les configurations Apache directement. Pour cela j'ai du désactiver le CORS sur laravel, pour cela il suffit de commenter ou retirer la ligne concernant le middleware HandleCors dans app/http/kernel.php. Puis aller sur le domaine connecté au conteneur du back-end, dans les paramètres apaches et nginx => Additional Apache directives, mettre pour le http et le https, un code similaire :

# Activer le mode proxy
ProxyRequests Off
ProxyPreserveHost On

# Activer les en-têtes CORS
Header always set Access-Control-Allow-Origin "https://mondomainefront-end.example"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
Header always set Access-Control-Expose-Headers "Authorization"
Header always set Access-Control-Allow-Credentials "true"

# Gérer les requêtes OPTIONS (preflight)
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

# Configuration pour les requêtes HTTP normales
<Location />
	ProxyPass http://127.0.0.1:8000/
	ProxyPassReverse http://127.0.0.1:8000/
</Location>

⚠️Attention à bien renseigner le domaine front-end autorisé