Le mécanisme CORS (Cross-Origin Resource Sharing) est la source N°1 de frustration des développeurs web. Comprenez pourquoi le serveur répond correctement mais le navigateur bloque la réponse et comment configurer les en-têtes Access-Control sans faille de sécurité.
https://monsite.com et http://monsite.com sont deux origines différentes.
Le blocage est effectué par le navigateur du client, JAMAIS par le serveur lui-même.
Vérification préalable automatique envoyée avant tout POST, PUT ou requête avec headers custom.
L'en-tête Access-Control-Allow-Origin: * est formellement interdit si credentials: true.
# 1. Requête Preflight OPTIONS envoyée automatiquement par le navigateur : OPTIONS /api/v1/orders HTTP/1.1 Host: api.learnweb.com Origin: https://learnweb.com Access-Control-Request-Method: POST Access-Control-Request-Headers: Authorization, Content-Type # 2. Réponse OBLIGATOIRE du backend pour autoriser le passage (HTTP 204 ou 200) : HTTP/1.1 204 No Content Access-Control-Allow-Origin: https://learnweb.com Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Authorization, Content-Type Access-Control-Allow-Credentials: true Access-Control-Max-Age: 86400 # 3. Test direct en ligne de commande pour simuler le navigateur : $ curl -I -X OPTIONS https://api.learnweb.com/api/v1/orders -H "Origin: https://learnweb.com" -H "Access-Control-Request-Method: POST" # ✅ Si les headers Access-Control-Allow-* apparaissent : le navigateur autorise l'accès !
Cross-Origin Request Blocked, votre API a bel et bien reçu la requête et l'a exécutée ! Elle a même renvoyé les données. C'est le navigateur web de l'internaute qui jette la réponse à la poubelle avant que votre code JavaScript ne puisse la toucher, parce que les en-têtes de permission étaient absents. Access-Control-Allow-Origin: *.credentials: true).https://learnweb.com).| En-tête de Réponse | Valeur Recommandée en Production | Rôle Technique |
|---|---|---|
| Access-Control-Allow-Origin | https://learnweb.com (Origine explicite) | Déclare quel domaine a le droit de lire les données |
| Access-Control-Allow-Methods | GET, POST, PUT, DELETE, OPTIONS | Liste des verbes HTTP autorisés pour cette route |
| Access-Control-Allow-Headers | Content-Type, Authorization | Autorise l'envoi de headers personnalisés (notamment le Bearer JWT) |
| Access-Control-Allow-Credentials | true | Autorise le passage des cookies de session et informations d'identification |
| Access-Control-Max-Age | 86400 (24 heures) | Met la réponse OPTIONS en cache pour éviter de renvoyer un preflight à chaque clic |