Qu'est-ce que CORS et comment le gérez-vous dans Node ?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) est un mécanisme de sécurité du navigateur qui contrôle si une page web d'une **origine** peut effectuer des requêtes vers un serveur sur une **origine différente**. Par défaut, les navigateurs bloquent les requêtes cross-origin ; le serveur doit explicitement les autoriser via les en-têtes de réponse.

## La politique de même origine et le problème

```text
Origin = scheme + host + port. These are DIFFERENT origins:
  https://app.example.com   →  https://api.example.com   (different host)
  http://localhost:3000     →  http://localhost:4000      (different port)

Browser blocks the cross-origin request UNLESS the server sends CORS headers allowing it.
```

Ainsi, une application React sur `localhost:3000` appelant une API sur `localhost:4000` est cross-origin — le navigateur la bloque à moins que l'API n'y consente.

## Les en-têtes de réponse clés

```text
Access-Control-Allow-Origin: https://app.example.com   ← who is allowed
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   ← allowed methods
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true                 ← allow cookies/auth
```

Le serveur contrôle l'accès en envoyant ces en-têtes. Le navigateur les lit et décide s'il autoriser la page à voir la réponse.

## Pourquoi c'est important

CORS est l'un des pièges les plus courants en développement web — presque chaque configuration front-end-vers-API y est confrontée (en particulier en développement local avec des ports différents).

Comprendre *pourquoi* elle existe (sécurité same-origin du navigateur), comment le serveur y consent via des en-têtes, comment la configurer en toute sécurité (liste d'autorisations d'origines, gestion prudente des identifiants), et le fait crucial qu'il s'agit d'un mécanisme de *navigateur* (et non d'une autorisation API) est essentiel pour connecter correctement et en toute sécurité les front-ends aux APIs Node sans être bloqué ou surexposer le serveur.

## Gestion de CORS dans Express

```js
import cors from "cors";

// ❌ allow everything — convenient but insecure for credentialed/private APIs
app.use(cors());

// ✅ restrict to specific trusted origins
app.use(cors({
  origin: ["https://app.example.com", "http://localhost:3000"], // allowlist
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true, // allow cookies — REQUIRES a specific origin (not "*")
}));
```

Le middleware `cors` définit les en-têtes pour vous. Pour la production, **limitez `origin` à une liste d'autorisations** plutôt que `*` — et notez que l'autorisation des identifiants (`credentials: true`) est incompatible avec le joker `*`.

## Requêtes préalables (preflight)

```text
For "non-simple" requests (PUT/DELETE, custom headers, JSON), the browser first
sends an OPTIONS "preflight" request to check permissions. The cors middleware
handles responding to it automatically.
```

## Idée fausse courante

```text
CORS is enforced by the BROWSER, not the server. It does NOT protect your API
from non-browser clients (curl, Postman, other servers) — those ignore CORS.
It only governs what browser JavaScript on other origins can do.
```