CORS Express : corriger l'erreur CORS, avec ou sans cors

Une erreur CORS ("No 'Access-Control-Allow-Origin' header is present") signifie qu'une page web sur une origine, par exemple http://localhost:5173, a appelé votre API sur une autre origine, et que le navigateur a refusé de laisser la page lire la réponse, parce que la réponse n'indiquait pas que cette origine était autorisée. La correction se fait côté serveur : envoyez Access-Control-Allow-Origin avec l'origine de la page, et répondez à la requête preflight OPTIONS du navigateur avec les méthodes et les en-têtes que vous acceptez. Dans Express, c'est quelques lignes de middleware, ou app.use(cors()) avec le package cors.

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

const ALLOWED_ORIGIN = 'https://app.example.com';

function cors(req, res, next) {
    res.set('Access-Control-Allow-Origin', ALLOWED_ORIGIN);
    res.set('Vary', 'Origin');
    if (req.method === 'OPTIONS') {
        res.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
        res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
        res.set('Access-Control-Max-Age', '600');
        return res.sendStatus(204);
    }
    next();
}

app.use(cors);

app.get('/api/products', (req, res) => {
    res.json([{ id: 1, name: 'Lamp' }]);
});

app.put('/api/products/:id', (req, res) => {
    res.json({ updated: req.params.id });
});

// GET /api/products
app.listen(3000);

La réponse est la liste des produits, et son onglet Headers affiche access-control-allow-origin: https://app.example.com : une page sur cette origine a le droit de la lire. Envoyez maintenant OPTIONS /api/products/1 avec les en-têtes Origin: https://app.example.com et Access-Control-Request-Method: PUT. C'est le preflight qu'un navigateur envoie avant un PUT, et la réponse est 204 avec les méthodes et en-têtes autorisés, sans corps.

Ce que vérifie le navigateur

Les pages de même origine n'ont besoin de rien. Pour une requête cross-origin, le navigateur lit ces en-têtes de réponse :

Un simple GET ou un POST de type formulaire part directement au serveur, et le navigateur vérifie Access-Control-Allow-Origin dans la réponse. Le serveur exécute quand même la requête ; CORS décide seulement si la page voit le résultat. Une requête avec un corps JSON, un en-tête Authorization ou une méthode comme PUT ou DELETE est précédée d'une requête preflight OPTIONS, et la vraie requête n'est envoyée que si la réponse au preflight l'autorise. C'est pour cela qu'un middleware CORS doit répondre à OPTIONS avant toute route ou vérification d'authentification.

Autoriser plusieurs origines, avec credentials

Access-Control-Allow-Origin contient une seule origine ou *, jamais une liste. Pour en autoriser plusieurs, comparez l'en-tête Origin de la requête avec une liste autorisée et renvoyez-le quand il correspond :

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

const allowed = new Set(['https://app.example.com', 'http://localhost:5173']);

app.use((req, res, next) => {
    const origin = req.get('origin');
    if (origin && allowed.has(origin)) {
        res.set('Access-Control-Allow-Origin', origin);
        res.set('Access-Control-Allow-Credentials', 'true');
    }
    res.set('Vary', 'Origin');
    if (req.method === 'OPTIONS') {
        res.set('Access-Control-Allow-Methods', 'GET, POST');
        res.set('Access-Control-Allow-Headers', 'Content-Type');
        return res.sendStatus(204);
    }
    next();
});

app.get('/api/me', (req, res) => {
    res.json({ origin: req.get('origin') ?? null });
});

app.listen(3000);

La première requête n'a pas d'en-tête Origin, comme un appel depuis curl ou une page de même origine, donc elle reçoit {"origin":null} et aucun en-tête CORS. Envoyez GET /api/me avec l'en-tête Origin: http://localhost:5173 et l'onglet Headers montre cette origine renvoyée, plus access-control-allow-credentials: true. Remplacez l'en-tête par Origin: https://evil.example et les deux en-têtes CORS disparaissent : le serveur répond toujours, mais un navigateur empêcherait la page de lire la réponse. Access-Control-Allow-Credentials: true permet à la page d'envoyer des cookies (avec fetch(url, { credentials: 'include' })), et les navigateurs le refusent en même temps que *, donc les credentials demandent toujours l'origine exacte.

Le package cors

Le package cors fait le même travail avec des options. Installez-le avec npm install cors :

const cors = require('cors');

// Any origin, no cookies: fine for a public read-only API.
app.use(cors());

// Only your frontend, with cookies.
app.use(cors({
    origin: ['https://app.example.com', 'http://localhost:5173'],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
}));

// One route only.
app.get('/api/public', cors(), handler);

Appelé sans options, cors() envoie Access-Control-Allow-Origin: * et répond à tous les preflights. N'utilisez * que pour des données publiques qui ne demandent pas de connexion.

Erreurs fréquentes

Ajouter CORS après les routes ou après un middleware d'authentification. La requête preflight OPTIONS ne porte pas d'en-tête Authorization, donc une vérification d'authentification placée avant lui répond 401 et le navigateur signale une erreur CORS. Enregistrez le middleware CORS en premier.

Mettre * avec les credentials. Les navigateurs refusent la réponse. Renvoyez plutôt l'origine précise.

Essayer de corriger CORS dans le frontend. Les options de requête comme mode: 'no-cors' ne lèvent pas la restriction ; elles vous donnent une réponse opaque que vous ne pouvez pas lire. Seuls les en-têtes du serveur règlent le problème.

Pour le fonctionnement de app.use() et l'ordre des middlewares, voir les middlewares Express.