T
cors debugging web-development javascript security api

Résoudre l'erreur CORS et les problèmes courants d'Access-Control-Allow-Origin

Un guide complet pour corriger les erreurs CORS telles que 'blocked by CORS policy', 'No Access-Control-Allow-Origin header' et les échecs de 'CORS preflight'. Apprenez à configurer votre serveur correctement.

2026-04-11

Résoudre l'erreur "CORS error" et les problèmes courants d'Access-Control-Allow-Origin : Le Guide Complet

Si vous avez déjà construit une application web qui effectue des requêtes vers une API sur un domaine différent, vous avez presque certainement rencontré la redoutable "CORS error". Elle ressemble généralement à ceci dans la console de votre navigateur :

Access to fetch at 'https://api.example.com' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Dans ce guide, nous expliquerons exactement ce qu'est le CORS, pourquoi il existe et comment corriger ces erreurs définitivement.

1. Messages d'erreur CORS courants

Vous verrez principalement ces erreurs dans les outils de développement de votre navigateur (onglet Console ou Réseau) :

  • blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present ...
  • The 'Access-Control-Allow-Origin' header contains multiple values ...
  • Response to preflight request doesn't pass access control check ...
  • Method NOT ALLOWED ... (lorsque la méthode HTTP comme POST ou DELETE n'est pas autorisée par le CORS)

2. Qu'est-ce que le CORS ?

CORS (Cross-Origin Resource Sharing) est une fonctionnalité de sécurité implémentée par les navigateurs. Elle empêche un site web malveillant d'effectuer des requêtes vers un domaine différent (comme votre banque ou votre API privée) sans autorisation.

Par défaut, les navigateurs suivent la politique de même origine (Same-Origin Policy), ce qui signifie qu'un script sur a.com ne peut demander des données que de a.com. Le CORS est le mécanisme qui permet à a.com de demander des données en toute sécurité à b.com si b.com l'autorise explicitement.

3. Principales causes et solutions

3.1 En-tête "Access-Control-Allow-Origin" manquant

C'est l'erreur la plus courante. Cela signifie que le serveur auquel vous demandez des données n'a pas indiqué au navigateur que votre domaine est autorisé à accéder à la ressource.

La Solution : La correction DOIT se faire du côté serveur. Vous devez ajouter l'en-tête Access-Control-Allow-Origin à la réponse.

  • Pour les API publiques : Réglez-le sur * (autoriser tout).
  • Pour les API privées : Réglez-le sur votre domaine spécifique (ex: https://myapp.com).

3.2 Échecs de CORS preflight

Pour les requêtes "complexes" (comme celles avec des en-têtes personnalisés ou des méthodes comme PUT/DELETE), le navigateur envoie d'abord une requête automatique OPTIONS. C'est ce qu'on appelle une requête de Preflight (pré-vérification).

L'Erreur : Response to preflight request doesn't pass access control check.

La Solution : Assurez-vous que votre serveur gère les requêtes OPTIONS et renvoie un statut 200 OK ou 204 No Content avec les en-têtes CORS corrects :

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Methods (ex: GET, POST, OPTIONS, PUT, DELETE)
  • Access-Control-Allow-Headers (ex: Content-Type, Authorization)

3.3 "Access-Control-Allow-Credentials"

Si vous envoyez des cookies ou des en-têtes d'autorisation avec votre requête (withCredentials: true), les règles du CORS deviennent plus strictes.

L'Erreur : The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

La Solution :

  1. Vous ne pouvez pas utiliser * pour Access-Control-Allow-Origin. Vous devez spécifier l'origine exacte.
  2. Vous devez également ajouter l'en-tête : Access-Control-Allow-Credentials: true.

4. Comment corriger le CORS dans différents environnements

4.1 Node.js (Express)

Le moyen le plus simple est d'utiliser le middleware cors :

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

app.use(cors({
  origin: 'https://myapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true
}));

4.2 Nginx

Ajoutez ces lignes à votre bloc server ou location :

add_header 'Access-Control-Allow-Origin' 'https://myapp.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

if ($request_method = 'OPTIONS') {
    return 204;
}

4.3 Python (Flask)

Utilisez l'extension flask-cors :

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["https://myapp.com"])

5. FAQ : Questions Fréquemment Posées

Q : Puis-je corriger une erreur CORS depuis le frontend (JavaScript) ?

R : Non. Le CORS est une politique de sécurité côté serveur appliquée par le navigateur. Vous ne pouvez pas le "contourner" dans votre code JavaScript. Si vous ne contrôlez pas le serveur, vous devez utiliser un Serveur Proxy (Proxy Server) pour récupérer les données à votre place.

Q : Pourquoi est-ce que je vois des erreurs CORS uniquement dans le navigateur et pas dans Postman ?

R : Postman est une application autonome, pas un navigateur web. Il n'applique pas la politique de même origine ni les règles du CORS. Seuls les navigateurs web (Chrome, Firefox, etc.) appliquent le CORS.

Q : Quel est le risque de régler Access-Control-Allow-Origin sur "*" ?

R : Pour les données publiques, il n'y a pas de risque. Cependant, pour une API qui gère des données utilisateur ou nécessite une authentification, le régler sur * permet à n'importe quel site web d'effectuer des requêtes au nom d'un utilisateur connecté, ce qui peut mener au vol de données.

6. Tableau récapitulatif des en-têtes CORS

En-tête Description
Access-Control-Allow-Origin Spécifie quels domaines sont autorisés à accéder à la ressource.
Access-Control-Allow-Methods Spécifie quelles méthodes HTTP (GET, POST, etc.) sont autorisées.
Access-Control-Allow-Headers Spécifie quels en-têtes personnalisés peuvent être envoyés.
Access-Control-Allow-Credentials Indique si la réponse peut être partagée lorsque le flag credentials est à true.
Access-Control-Max-Age Spécifie combien de temps les résultats d'une requête de preflight peuvent être mis en cache.

Erreurs liées

  • Résoudre les erreurs 'Unexpected token in JSON'
  • Comment corriger 'URIError: URI malformed' en JavaScript
  • Résoudre 'JWT expired' et les erreurs JWT courantes
Retour au blog