CORS dans React : Qu’est-ce que c’est, pourquoi c’est important et comment l’activer

21/06/2025, by Ivan

Download JSON Drop API

Comprendre CORS dans React

CORS a longtemps été une source de confusion — et de frustration — pour les développeurs, surtout les débutants. Le concept peut être difficile à comprendre, en particulier lorsque vous construisez des applications monopage (SPA) avec des frameworks comme React, Angular ou Vue, et que vous essayez d’interagir avec des API tierces.

Dans ce guide, je vais vous aider à comprendre CORS depuis les bases. Nous allons construire une application React simple accompagnée d’un serveur Express pour illustrer ce qui déclenche les erreurs CORS et pourquoi elles surviennent. Plus important encore, je vous montrerai différentes façons de résoudre ces problèmes, en général et spécifiquement dans un environnement React.

Qu’est-ce que CORS ?

CORS, ou Cross-Origin Resource Sharing, est un protocole qui régit la façon dont les applications web demandent des ressources à des serveurs hébergés sur des origines différentes. Tout comme HTTPS définit les règles pour une communication sécurisée, CORS fixe les règles pour les requêtes cross-origin.

Les applications web modernes sont généralement composées de deux parties clés : le client (le frontend qui s’exécute dans votre navigateur) et le serveur (généralement une API ou un service backend). Le client envoie des requêtes au serveur — par exemple pour récupérer des données — et le serveur renvoie une réponse. CORS intervient lorsque ces deux parties vivent sur des domaines, ports ou protocoles différents.

CORS localhost — Requête vers localhost.

Pourquoi cette architecture est si courante

Cette architecture découplée — où le frontend et le backend sont développés et déployés comme des applications distinctes — est de plus en plus populaire. Un avantage majeur est la flexibilité : votre backend peut servir plusieurs types de clients, y compris des applications web, interfaces de bureau, applications mobiles, voire des appareils IoT. Chaque client peut consommer les mêmes API sans être étroitement lié à la couche de présentation.

La politique de même origine et les requêtes cross-origin

Parce que le client et le serveur sont des applications séparées, ils sont généralement hébergés sur des domaines, ports ou protocoles différents. Cela signifie que même lorsque votre frontend lui-même essaie de communiquer avec votre backend lui-même, le navigateur peut considérer la requête comme cross-origin.

Cela est encore plus fréquent quand vous travaillez avec des services tiers — pour l’authentification, l’analytics, les passerelles de paiement, etc. Dans tous ces cas, votre frontend doit interagir avec une origine différente en envoyant des requêtes HTTP.

Et voici le piège : les navigateurs modernes appliquent une fonctionnalité de sécurité appelée politique de même origine (Same-Origin Policy) qui restreint la façon dont les scripts d’une origine peuvent interagir avec des ressources d’une autre. C’est là que CORS intervient — c’est un mécanisme qui autorise en toute sécurité ces requêtes cross-origin.

Paramètres CORS — Réponse du serveur au client de la même origine

Pourquoi les navigateurs bloquent les requêtes cross-origin

Quand votre application web essaie de demander une ressource d’une origine différente — comme un autre domaine, port ou protocole — le navigateur applique une règle de sécurité appelée politique de même origine (SOP). Cette politique vise à empêcher que des sites potentiellement malveillants accèdent à des données sensibles sur une autre origine sans permission.

Historiquement, cela a rendu le web beaucoup plus sûr. Par exemple, un script s’exécutant sur xyz.com ne pouvait pas discrètement récupérer des données personnelles sur abcbank.com, protégeant ainsi les utilisateurs contre les attaques cross-site. Cependant, la politique de même origine bloque aussi des cas d’usage légitimes — comme quand votre app React sur localhost:3000 tente de récupérer des données d’une API sur localhost:8080 ou d’un service externe.

Voici CORS : la solution aux restrictions SOP

C’est là que CORS — Cross-Origin Resource Sharing — intervient.

CORS est un protocole qui assouplit la politique de même origine sous des conditions contrôlées. Il permet aux serveurs d’indiquer — via des en-têtes HTTP spécifiques — que certaines requêtes cross-origin sont sûres et autorisées.

Ainsi, quand votre application cliente fait une requête vers une origine différente, le serveur peut répondre avec un ensemble spécial d’en-têtes CORS. Ces en-têtes agissent comme un « laissez-passer » indiquant au navigateur : « Cette requête cross-origin est autorisée. » Résultat : le navigateur ne bloque plus la réponse et la ressource est partagée avec succès.

Réponse avec CORS — Réponse client-serveur avec CORS activé.

Que se passe-t-il quand CORS est activé ?

Dès que votre navigateur détecte les en-têtes CORS dans la réponse du serveur, il autorise l’accès aux données par votre application — même si l’origine de la requête diffère. C’est l’essence même de CORS : un accès contrôlé aux ressources entre origines.

Maintenant que vous comprenez bien ce qu’est CORS et pourquoi il est nécessaire, passons à un exemple pratique pour le voir en action. Si vous souhaitez approfondir, vous pouvez toujours consulter ce guide complet sur CORS pour plus de détails.

🛠️ Étape 1 : Créer un serveur Express avec des endpoints API

Pour démontrer le fonctionnement de CORS, nous avons besoin de :

Un client (construit avec React) qui effectue des requêtes HTTP
Un serveur (construit avec Express) qui expose des endpoints API pour répondre à ces requêtes

⚠️ Pour déclencher un vrai scénario CORS, le client et le serveur doivent fonctionner sur des origines différentes — par exemple, des ports différents comme localhost:3000 et localhost:8080.

🧱 Configurer le serveur

Commençons par créer un serveur Express basique.

Créer le dossier du projet :

mkdir cors-server && cd cors-server

Initialiser un nouveau projet Node.js :

npm init -y

Cela crée un fichier package.json avec des valeurs par défaut.

Installer Express :

npm install express

Créer le fichier d’entrée de l’application :

Créez un fichier nommé app.js à la racine et ajoutez le code suivant :

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

app.get('/', (req, res) => {
  res.send('Bienvenue sur le serveur CORS 😁');
});

app.get('/cors', (req, res) => {
  res.send('CORS est activé ici 🎈');
});

app.listen(8080, () => {
  console.log('Écoute sur le port 8080');
});

C’est un serveur Express minimaliste avec deux endpoints :

/ renvoie un message de bienvenue.
/cors simule un endpoint ressource que votre app React ira chercher.

Lancer le serveur :

node app

Une fois démarré, visitez http://localhost:8080/ dans votre navigateur, vous devriez voir :

Bienvenue sur le serveur CORS 😁

Et si vous allez sur http://localhost:8080/cors, vous verrez quelque chose comme :

Express Server Endpoint /cors. — Endpoint /cors du serveur Express.

⚛️ Étape 2 : Configurer l’application React

Maintenant que notre serveur Express tourne, créons une app React simple pour effectuer des requêtes HTTP vers ce serveur — et déclencher volontairement une erreur CORS pour apprendre à la corriger.

📦 Créer un nouveau projet React

Dans un répertoire différent de celui du serveur, lancez la commande :

npx create-react-app react-cors-guide

Cela va créer une app React basique dans un dossier nommé react-cors-guide.

Une fois terminé, allez dans le répertoire du projet et ouvrez le fichier src/App.js. Remplacez son contenu par :

import { useEffect } from 'react';
import './App.css';

function App() {
  const makeAPICall = async () => {
    try {
      const response = await fetch('http://localhost:8080/', { mode: 'cors' });
      const data = await response.json();
      console.log({ data });
    } catch (error) {
      console.error('Erreur CORS :', error);
    }
  };

  useEffect(() => {
    makeAPICall();
  }, []);

  return (
    <div className="App">
      <h1>Guide React CORS</h1>
    </div>
  );
}

export default App;

🧠 Que se passe-t-il ici ?

Nous définissons une fonction makeAPICall qui effectue une requête GET vers http://localhost:8080/ en utilisant la Fetch API.
L’option { mode: 'cors' } indique explicitement au navigateur qu’il s’agit d’une requête cross-origin.
Le hook useEffect garantit que la requête est déclenchée dès que le composant <App /> est monté.

🔥 Attendez-vous à une erreur CORS

Si vous lancez l’app React avec :

npm start

Et regardez la console développeur du navigateur, vous verrez probablement une erreur CORS semblable à ceci :

Accès à fetch sur 'http://localhost:8080/' depuis l’origine 'http://localhost:3000' bloqué par la politique CORS.

C’est la politique de même origine du navigateur qui fait son travail : bloquer l’accès à une ressource venant d’une origine différente.

Comprendre l’erreur CORS

L’erreur vue dans la console du navigateur est un problème classique de CORS. Même si votre client et serveur tournent tous deux sur localhost, ils sont sur des ports différents — React sur localhost:3000 et Express sur localhost:8080.

Cela signifie qu’ils sont considérés comme des origines différentes selon la politique de même origine (SOP), et le navigateur bloque la requête pour des raisons de sécurité.

⚠️ Message d’erreur typique de CORS

Voici ce que le navigateur vous a probablement dit :

Accès à fetch sur 'http://localhost:8080/' depuis l’origine 'http://localhost:3000'
a été bloqué par la politique CORS : Aucun en-tête 'Access-Control-Allow-Origin' n’est
présent sur la ressource demandée. Si une réponse opaque répond à vos besoins,
réglez le mode de la requête sur 'no-cors' pour récupérer la ressource sans CORS.

Décomposons cela :

Le navigateur bloque la réponse car il n’a pas trouvé d’en-tête Access-Control-Allow-Origin dans la réponse du serveur.
Il suggère même une solution de contournement — régler le mode fetch sur 'no-cors' — mais cela renverrait une réponse limitée et opaque, inutilisable.
Et surtout : votre client n’a rien fait de mal. CORS n’est pas une erreur côté client — c’est une règle imposée par le navigateur basée sur la réponse du serveur.

✅ CORS doit toujours être géré côté serveur

Comme c’est la réponse du serveur qui contrôle si le navigateur autorise l’accès, la bonne solution est de configurer votre serveur pour envoyer les en-têtes CORS appropriés.

Vous pouvez contourner CORS côté client avec des proxies pendant le développement — mais la bonne méthode, sûre pour la production, est d’activer CORS directement sur le serveur.

🔧 Activer CORS sur le serveur Express

Retournez dans app.js de votre serveur Express et modifiez l’endpoint /cors :

app.get('/cors', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send({ msg: 'CORS est activé ici 🎈' });
});

Voici ce qui se passe :

L’en-tête Access-Control-Allow-Origin est défini sur *, ce qui signifie que toutes les origines peuvent accéder à cette ressource.
C’est une manière rapide et simple d’activer CORS pour une démonstration. (Plus tard, vous souhaiterez peut-être restreindre l’accès à certaines origines spécifiques.)

🔁 Mettre à jour le client React

Retournez maintenant dans votre app React et modifiez l’URL fetch pour cibler le nouvel endpoint :

const response = await fetch('http://localhost:8080/cors', { mode: 'cors' });

Enregistrez vos modifications et redémarrez le serveur de développement React si nécessaire.

🧪 Testez-le

Ouvrez votre navigateur et rechargez l’app. Cette fois, le navigateur devrait autoriser la réponse, et vous verrez dans la console :

{ data: { msg: 'CORS est activé ici 🎈' } }

Succès ! Vous venez de faire votre première requête cross-origin avec CORS correctement configuré.

Confirmer la correction : CORS fonctionne !

Une fois que l’en-tête CORS est correctement défini sur le serveur, l’erreur disparaît et votre app React reçoit avec succès la réponse JSON. 🎉 Tout fonctionne comme prévu ! N’oubliez pas que vous devrez peut-être redémarrer votre serveur backend après les modifications pour qu’elles prennent effet.

🎯 Restreindre CORS à certaines origines

Au lieu d’utiliser un joker (*), qui autorise n’importe quelle origine à accéder à vos ressources, vous pouvez restreindre CORS à un domaine spécifique — par exemple, votre serveur de développement React :

app.get('/cors', (req, res) => {
  res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.send({ msg: 'CORS est activé ici 🎈' });
});

Ceci est recommandé en production pour empêcher des sites non autorisés d’accéder à votre API.

⚠️ Quand vous ne pouvez pas modifier le serveur

Bien que modifier le serveur soit la méthode la plus propre et robuste pour gérer CORS, ce n’est pas toujours possible. Beaucoup de développeurs rencontrent ce problème en utilisant des API tierces — pour l’authentification, les notifications, les services email, etc. Dans ces cas, vous ne pouvez pas changer la politique CORS du serveur.

Si cela arrive, vous êtes bloqué… ou pas ?

🧞‍♂️ Solution de contournement : utiliser un proxy dans React

Voici une astuce spécialement pour le développement React : proxyfier vos requêtes API via le serveur de développement.

Considérez le proxy comme un relais : votre app fait croire que la requête vient d’une autre source (l’origine du serveur), contournant ainsi les restrictions SOP du navigateur.

✏️ Comment configurer un proxy

Ouvrez le fichier package.json à la racine du projet React.
Ajoutez un champ proxy :

{
  ...
  "proxy": "http://localhost:8080"
}

Redémarrez votre serveur React (npm start) ; désormais toutes les requêtes seront silencieusement redirigées vers le backend.

Quand vous faites une requête vers /cors, par exemple :

const response = await fetch('/cors');

Cela sera en interne proxyfié vers http://localhost:8080/cors, rendant la requête « même origine » pour le navigateur.

🧪 Vous voulez utiliser un service tiers ?

Pas de problème ! Vous pouvez aussi proxyfier vers ce service :

{
  ...
  "proxy": "https://randomservice.com"
}

Gardez à l’esprit :

Seules les requêtes non HTML (typiquement les API) sont proxyfiées.
L’en-tête Accept de votre requête ne doit pas être text/html.
Pour des configurations plus complexes (ex. multiples proxies), utilisez http-proxy-middleware pour configurer un proxy personnalisé.

🧹 Conclusion : bonnes pratiques pour CORS dans React

Pour CORS, retenez ceci :

Corrigez toujours CORS côté serveur — c’est la solution la plus fiable et sécurisée.
En développement, la configuration proxy de React peut vous aider à éviter les problèmes CORS sans modifier le serveur.
Si vous ne contrôlez pas le serveur API, contactez le fournisseur — ou utilisez un serveur proxy à vous.
Les extensions Chrome comme CORS Unblock peuvent fonctionner temporairement, mais ne doivent jamais être utilisées en production.
Spécifiez toujours { mode: 'cors' } dans vos requêtes fetch pour un comportement explicite.
Sachez que la plupart des contournements côté navigateur ne fonctionnent plus une fois en production — préparez-vous dès le départ.

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience