Qu'est-ce qu'une erreur CORS ?

Si vous avez déjà vu ce message dans votre console :

"Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy"

…vous n'êtes pas seul. L'erreur CORS (Cross-Origin Resource Sharing) est l'une des erreurs les plus fréquentes et les plus incomprises du développement web. Bonne nouvelle : une fois que vous comprenez pourquoi elle existe, la corriger devient simple.

Pourquoi CORS existe-t-il ?

Les navigateurs appliquent une politique de sécurité appelée Same-Origin Policy (politique de même origine). Par défaut, un script chargé depuis http://monsite.com ne peut pas faire de requêtes vers https://api-tierce.com. CORS est le mécanisme qui permet aux serveurs d'assouplir cette règle de manière contrôlée.

L'erreur CORS n'est pas un bug de votre code JavaScript — c'est le serveur qui n'autorise pas votre origine. La solution se trouve donc presque toujours côté serveur.

Identifier précisément l'erreur

Avant de corriger, lisez attentivement le message d'erreur dans la console :

  • "No 'Access-Control-Allow-Origin' header" : le serveur ne renvoie aucun header CORS
  • "The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*'" : votre requête utilise des credentials (cookies, auth) mais le serveur répond avec *
  • "Method not allowed by Access-Control-Allow-Methods" : le serveur n'autorise pas votre méthode HTTP (PUT, DELETE, etc.)
  • "Request header not allowed" : un header custom n'est pas dans la liste blanche du serveur

Solutions selon votre environnement

Si vous contrôlez le serveur

C'est la solution propre. Configurez les headers CORS côté serveur :

  • Node.js / Express : utilisez le middleware cors (npm install cors)
  • Django : installez django-cors-headers et configurez CORS_ALLOWED_ORIGINS
  • Laravel : modifiez le fichier config/cors.php
  • Nginx : ajoutez les directives add_header Access-Control-Allow-Origin dans votre config

En développement, vous pouvez autoriser toutes les origines avec *, mais en production, spécifiez toujours les origines exactes autorisées.

Si vous utilisez une API tierce que vous ne contrôlez pas

Plusieurs approches sont possibles :

  1. Proxy côté serveur : faites passer vos requêtes par votre propre backend qui appellera l'API tierce. Le navigateur ne fait alors qu'une requête vers votre domaine.
  2. Proxy de développement : en développement local, configurez un proxy dans votre outil de build (Vite, Webpack, Create React App) pour éviter CORS sans modifier le serveur.
  3. JSONP : solution ancienne, uniquement pour les GET, à éviter si possible.

Les erreurs CORS et les requêtes preflight

Pour les requêtes dites "complexes" (méthodes autres que GET/POST, headers custom), le navigateur envoie d'abord une requête OPTIONS appelée preflight. Si votre serveur ne répond pas correctement à cette requête OPTIONS, toutes vos requêtes CORS échoueront. Assurez-vous que votre serveur gère les requêtes OPTIONS et renvoie les headers appropriés (Access-Control-Allow-Methods, Access-Control-Allow-Headers).

Ce qui ne fonctionne PAS

  • ❌ Désactiver CORS dans le navigateur via une extension en production
  • ❌ Ajouter des headers CORS côté client (JavaScript) — seul le serveur peut les définir
  • ❌ Utiliser un proxy public en production (risque de sécurité et de disponibilité)

Conclusion

Les erreurs CORS sont frustrantes au premier abord, mais leur résolution est méthodique. Identifiez précisément le message d'erreur, déterminez si vous contrôlez le serveur, et appliquez la solution adaptée. En comprenant le mécanisme sous-jacent, vous résoudrez ces erreurs en quelques minutes plutôt qu'en plusieurs heures.