Comment résoudre les problèmes de cross-origin (CORS) ? Guide complet

Comprendre les erreurs CORS : pourquoi votre navigateur bloque les requêtes cross-origin

Si vous développez des applications web modernes, vous avez probablement déjà rencontré une erreur Cross-Origin Resource Sharing (CORS). Ce message frustrant apparaît lorsqu’un script (JavaScript) d’une origine (domaine, protocole ou port) tente d’accéder à une ressource située sur une autre origine. Le navigateur bloque alors la requête pour des raisons de sécurité.

Prenons un exemple concret : votre front-end tourne sur https://monapp.com et votre API sur https://api.monapp.com. Sans configuration CORS, le navigateur empêchera le JavaScript d’interroger l’API. Ce mécanisme, appelé Same-Origin Policy, protège les utilisateurs contre des attaques comme le vol de données. Mais pour les développeurs, il devient un obstacle à contourner.

Dans cet article, nous allons explorer en détail comment résoudre les problèmes de cross-origin (CORS) de manière efficace, que vous soyez côté serveur, côté client, ou même avec un proxy.

Les causes courantes des blocages CORS

Avant de chercher une solution, il faut identifier l’origine du problème. Voici les situations les plus fréquentes :

• Domaine différent : site-a.com vers site-b.com
• Sous-domaine différent : app.site.com vers api.site.com
• Protocole différent : http://site.com vers https://site.com
• Port différent : site.com:8080 vers site.com:3000
• Requêtes avec credentials (cookies, tokens) nécessitant des headers spécifiques

Comment fonctionne le mécanisme CORS ?

Le CORS repose sur des en-têtes HTTP que le serveur envoie pour indiquer au navigateur quelles origines sont autorisées. Lors d’une requête complexe (par exemple avec des headers personnalisés ou des méthodes autres que GET/POST), le navigateur envoie d’abord une requête préliminaire (preflight) avec la méthode OPTIONS. Le serveur doit répondre avec les bons en-têtes pour autoriser la vraie requête.

Les en-têtes essentiels côté serveur

Solutions côté serveur : configurer les en-têtes CORS

La méthode la plus fiable pour résoudre les erreurs CORS est de configurer correctement le serveur qui sert l’API ou les ressources. Voici comment faire selon les environnements courants.

Configuration CORS avec Node.js et Express

Utilisez le middleware cors :

const cors = require('cors');
const express = require('express');
const app = express();

// Autoriser toutes les origines (pour le développement uniquement)
app.use(cors());

// Configuration plus sécurisée
const corsOptions = {
  origin: 'https://monapp.com',
  optionsSuccessStatus: 200
};
app.use(cors(corsOptions));

Pour les requêtes avec credentials, ajoutez credentials: true et ne mettez pas origin: '*'.

Configuration CORS avec Apache

Dans le fichier .htaccess ou la configuration du virtual host :

Header set Access-Control-Allow-Origin "https://monapp.com"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Configuration CORS avec Nginx

Ajoutez dans le bloc location :

add_header Access-Control-Allow-Origin "https://monapp.com";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";

# Gérer les requêtes preflight
if ($request_method = 'OPTIONS') {
    add_header Content-Length 0;
    add_header Content-Type text/plain;
    return 204;
}

Configuration CORS avec les services cloud (AWS, Firebase, etc.)

• AWS S3 : Définissez une politique CORS dans la bucket configuration.
• Firebase Storage : Utilisez les règles de sécurité et la configuration CORS via la CLI.
• Azure Blob Storage : Configurez les règles CORS dans le portail Azure.

Solutions côté client : contourner les limitations

Parfois, vous n’avez pas accès à la configuration du serveur. Dans ce cas, vous pouvez agir côté client, mais attention : ces solutions sont des palliatifs, pas des correctifs définitifs.

Utiliser un proxy CORS

Un proxy CORS est un serveur intermédiaire qui ajoute les en-têtes nécessaires. Exemple avec un service comme cors-anywhere (à utiliser avec prudence) :

fetch('https://cors-anywhere.herokuapp.com/https://api.exemple.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Pour un environnement de production, mieux vaut déployer votre propre proxy.

Utiliser le mode sans CORS dans les extensions de navigateur

Des extensions comme « CORS Unblock » ou « Allow CORS » désactivent la politique de sécurité. Cela fonctionne pour les tests, mais jamais en production.

Modifier les paramètres de développement

Dans Chrome, vous pouvez lancer le navigateur avec --disable-web-security (uniquement pour le développement).

Bonnes pratiques pour éviter les erreurs CORS

Pour éviter de perdre du temps, suivez ces recommandations :

• Utilisez le même domaine : hébergez front-end et back-end sur la même origine (par exemple via un reverse proxy).
• Évitez les wildcards : ne mettez pas Access-Control-Allow-Origin: * en production si vous utilisez des credentials.
• Gérez correctement les requêtes preflight : votre serveur doit répondre rapidement aux OPTIONS avec les bons en-têtes.
• Testez avec des outils comme curl : curl -H "Origin: https://monapp.com" -I https://api.exemple.com pour vérifier les en-têtes.
• Limitez les origines autorisées : listez explicitement les domaines de confiance.

Checklist pour diagnostiquer une erreur CORS

• ✅ Vérifiez l’URL complète de la requête (protocole, domaine, port).
• ✅ Consultez la console du navigateur (onglet Network) pour voir les en-têtes de la requête et de la réponse.
• ✅ Vérifiez que le serveur renvoie bien les en-têtes CORS.
• ✅ Si la requête est complexe, assurez-vous que la réponse preflight (OPTIONS) est correcte.
• ✅ Si vous utilisez des credentials, vérifiez que Access-Control-Allow-Credentials: true est présent et que Access-Control-Allow-Origin n’est pas *.
• ✅ Testez avec un outil comme test-cors.org.

Erreurs courantes à éviter

• Oublier le header Access-Control-Allow-Headers : si votre requête envoie un header personnalisé, il doit être listé.
• Ne pas gérer les requêtes OPTIONS : certains frameworks le font automatiquement, mais pas tous.
• Utiliser des wildcards avec credentials : le navigateur rejette la combinaison * + credentials: true.
• Configurer CORS uniquement côté client : le serveur doit coopérer.

FAQ : questions fréquentes sur les problèmes CORS

Qu’est-ce qu’une requête preflight ?

Une requête preflight est une requête HTTP OPTIONS que le navigateur envoie avant la vraie requête pour vérifier si le serveur autorise l’opération. Elle est déclenchée pour les requêtes qui ne sont pas simples (méthodes autres que GET/POST, headers personnalisés, etc.).

Comment résoudre l’erreur « No ‘Access-Control-Allow-Origin’ header is present » ?

Cette erreur signifie que le serveur n’a pas inclus le header Access-Control-Allow-Origin dans sa réponse. Vous devez configurer le serveur pour qu’il l’ajoute, ou utiliser un proxy si vous n’avez pas accès au serveur.

Puis-je désactiver CORS dans mon navigateur ?

Oui, pour le développement uniquement, vous pouvez lancer Chrome avec --disable-web-security. Mais ne faites jamais cela en production, car cela expose les utilisateurs à des risques de sécurité.

Quelle est la différence entre CORS et SOP (Same-Origin Policy) ?

La Same-Origin Policy est une règle de sécurité de base qui empêche les requêtes cross-origin. CORS est un mécanisme qui permet de relâcher cette règle de manière contrôlée, en autorisant certaines origines.

Comment gérer CORS avec des cookies (credentials) ?

Vous devez configurer le serveur avec Access-Control-Allow-Credentials: true et Access-Control-Allow-Origin ne doit pas être *. Côté client, utilisez credentials: 'include' dans fetch ou withCredentials: true dans XMLHttpRequest.

Mon API fonctionne avec Postman mais pas dans le navigateur, pourquoi ?

Postman n’applique pas la politique CORS car ce n’est pas un navigateur. Le problème vient donc du navigateur qui bloque la requête. Vérifiez la configuration CORS de votre serveur.

Recommandations pour une gestion durable des CORS

Pour éviter de revivre les mêmes problèmes, intégrez la configuration CORS dès le début de votre projet. Documentez les origines autorisées et utilisez des variables d’environnement. Si vous utilisez un framework comme Express, Django ou Spring Boot, activez le middleware CORS avec des paramètres précis. Enfin, n’oubliez pas de tester régulièrement avec des outils automatisés.

Les problèmes de cross-origin (CORS) peuvent sembler complexes, mais avec une bonne compréhension des en-têtes et une configuration adaptée, vous pouvez les résoudre rapidement. N’hésitez pas à partager cet article avec vos collègues développeurs !

Photo by Kanhaiya Sharma on Unsplash