Aller au contenu principal

Comprendre CORS (Cross-Origin Resource Sharing)

CORS apparaît lorsqu’une page web appelle une ressource située sur une autre origine — protocole, domaine ou port différent. Si le front utilise http://localhost:3000 et l’API http://localhost:3001, leurs ports créent deux origines distinctes.

CORS est un protocole d’en-têtes HTTP par lequel un serveur indique au navigateur quelles origines peuvent lire ses réponses. Le navigateur peut envoyer certaines requêtes sans autorisation préalable, mais il n’expose la réponse au script que si les en-têtes sont compatibles.

La limite de sécurité à retenir​

CORS complète la politique de même origine du navigateur. Il ne remplace ni authentification, ni autorisation, ni protection CSRF et n’empêche pas nécessairement l’envoi d’une requête. Les appels serveur-à-serveur ne sont pas bloqués par CORS.

En-têtes principaux​

  • Access-Control-Allow-Origin autorise une origine précise ou, pour une ressource publique sans credentials, *.
  • Access-Control-Allow-Methods liste les méthodes admises.
  • Access-Control-Allow-Headers liste les en-têtes admis.
  • Access-Control-Allow-Credentials: true autorise cookies ou credentials avec une origine explicite ; cette option est incompatible avec Access-Control-Allow-Origin: *.

Requête simple et preflight​

Une requête n’est « simple » que si sa méthode, ses en-têtes et son Content-Type respectent tous les critères safelisted. Pour les autres requêtes, le navigateur envoie d’abord OPTIONS afin de vérifier l’origine, la méthode et les en-têtes demandés.

Une erreur CORS apparaît dans la console lorsque le navigateur refuse d’exposer la réponse, par exemple : No 'Access-Control-Allow-Origin' header is present….

Bonnes pratiques​

  • Autoriser une liste explicite d’origines lorsqu’une réponse contient des données privées.
  • Valider authentification, autorisation et protection CSRF séparément.
  • Tester les requêtes simples, les preflights, les credentials et les réponses d’erreur.

Process avec node/express + react​

Back-End Node.js​

  • Installation de CORS via NPM :
npm install cors
  • Configuration de CORS dans votre Application Express : dans le fichier principal de serveur Node.js :
const express = require('express');
const cors = require('cors');

const app = express();


// Configuration CORS
app.use(cors({
  origin: 'http://localhost:3000' // Remplacez par le port de votre front-end React
}));

// Vos routes et middlewares ici

const port = process.env.PORT || 3001;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Front-End React​

Dans votre application React, lorsque vous faites des requêtes au back-end, spécifiez l'URL complète du back-end. Par exemple, en utilisant fetch ou axios :

fetch('http://localhost:3001/api/data') // Remplacez par le port local de l'API Node
  .then((response) => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Avec Axios

axios.get('http://localhost:3001/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Environnement de Production​

Lorsque vous déployez votre application, n'oubliez pas de mettre a jour les adresses URL de votre application React et de votre API Node.js.