Aller au contenu principal

C'est quoi le CORS ?

C'est un mécanisme que vous commencerez a rencontrer quand vous entrer sur un projet déjà en place ou tout simplement ayant un front React par exemple avec une API en back via node.

En ultra simplifié : c'est un mécanisme qui permet de sécuriser les requêtes HTTP entre deux domaines différents.

C'est a dire ?

Si vous avez un front sur un domaine ou le port 3000 en local et un back sur un autre domaine / sur le port 3001, le CORS va permettre de sécuriser les requêtes HTTP entre ces deux domaines. Donc de base les deux domaines ne peuvent pas communiquer entre eux, le CORS va permettre de sécuriser cette communication et de pouvoir connecter votre front a votre back-end.

Qu'est-ce que le CORS ?​

CORS (Cross-Origin Resource Sharing) est une politique de sécurité dans les navigateurs web. Il fonctionne un peu comme un gardien qui décide quelles informations peuvent être partagées entre différents sites web.

Imaginez que chaque site web est une maison. CORS est la règle qui détermine si les résidents d'une maison peuvent interagir avec ceux d'une autre maison. Pourquoi et Quand avez-vous besoin de CORS ? Vous avez besoin de CORS lorsque vous développez des applications web qui interagissent avec des serveurs situés sur différents domaines.

Sécurité : CORS empêche les scripts malveillants d'autres sites de lire ou de modifier des données sensibles. Partage de Ressources : Il permet aux développeurs de contrôler comment les ressources sont partagées entre différents sites de manière sécurisée.

Mise en Place de CORS​

Pour configurer CORS, vous devez définir des en-têtes HTTP spécifiques sur votre serveur. Ces en-têtes indiquent au navigateur si une requête de différents domaines peut être acceptée ou non.

Définir l'Origine Autorisée​

Access-Control-Allow-Origin: Ici, vous spécifiez quel domaine peut accéder aux ressources. Par exemple, Access-Control-Allow-Origin: * permet à tous les domaines d'accéder aux ressources.

Définir les Méthodes Autorisées​

Access-Control-Allow-Methods: Spécifie les méthodes HTTP (GET, POST, PUT, etc.) autorisées pour l'accès aux ressources.

Définir les En-têtes Autorisées​

Access-Control-Allow-Headers: Liste les en-têtes HTTP spécifiques que les requêtes peuvent utiliser.

Fondamentaux à Savoir sur CORS​

Types de Requêtes​

Requêtes Simples​

Utilisent des méthodes GET, POST ou HEAD sans en-têtes HTTP spéciaux.

Requêtes Pré-vérifiées (Preflight)​

Nécessitent une vérification supplémentaire (requête OPTIONS) pour les méthodes autres que GET, POST ou HEAD, ou avec des en-têtes HTTP personnalisés.

Gestion des Erreurs CORS​

Les erreurs CORS se produisent lorsque le navigateur bloque une requête en raison de règles CORS non respectées. Exemple d'erreur : "No 'Access-Control-Allow-Origin' header is present on the requested resource."

Bonnes Pratiques​

Ne définissez pas Access-Control-Allow-Origin: * pour les ressources sensibles, car cela ouvre l'accès à tout le monde. Assurez-vous que les configurations CORS sont correctes et testées pour éviter les problèmes de sécurité.

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 l'URL/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 / axios :

fetch('http://localhost:3001/api/data') // Remplacez par l'URL/port local de l'API Node.js
  .then(response => 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.