Comment configurez-vous CORS dans FastAPI ?

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 appeler votre API sur une origine différente. FastAPI le configure avec le **`CORSMiddleware`** intégré. Vous rencontrerez CORS chaque fois qu'un frontend sur un domaine/port différent appelle votre API.

## Le problème que CORS résout

```text
A React app at http://localhost:3000 calling an API at http://localhost:8000 is
CROSS-ORIGIN (different port). The BROWSER blocks the response unless the API
sends CORS headers permitting that origin.
(origin = scheme + host + port)
```

## Configuration de CORSMiddleware

```python
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://app.example.com", "http://localhost:3000"],  # ALLOWLIST of origins
    allow_credentials=True,         # allow cookies/auth (requires specific origins, not "*")
    allow_methods=["*"],             # or ["GET", "POST", ...]
    allow_headers=["*"],
)
```

Le middleware ajoute les en-têtes de réponse CORS nécessaires, indiquant au navigateur quelles origines, méthodes et en-têtes sont autorisés. Le navigateur applique ces règles.

## Sécurité : restreindre les origines (n'utilisez pas "*")

```python
# ❌ allowing all origins — convenient but insecure for credentialed/private APIs
allow_origins=["*"]
# ✅ restrict to your known frontend origins (an allowlist)
allow_origins=["https://app.example.com"]
# NOTE: allow_credentials=True is INCOMPATIBLE with allow_origins=["*"]
```

En production, **restreignez `allow_origins` à une liste d'autorisations** plutôt que `*`. De plus, l'autorisation des identifiants (cookies/auth) nécessite des origines spécifiques — le caractère générique n'est pas autorisé avec les identifiants.

## Une idée fausse clé

```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 entirely.
CORS only governs what browser JavaScript from other origins may do.
```

## Pourquoi c'est important

CORS est l'un des pièges les plus courants du développement web — presque chaque configuration frontend-vers-API le rencontre (en particulier en développement local avec des ports différents, et en production avec un domaine frontend séparé), donc savoir comment le configurer avec le `CORSMiddleware` de FastAPI est une connaissance pratique et fréquemment nécessaire.

Comprendre *pourquoi* il existe (sécurité same-origin du navigateur), comment le serveur s'inscrit via des en-têtes de réponse, et comment le configurer (origines autorisées, méthodes, en-têtes, identifiants) est nécessaire pour connecter les frontends aux API FastAPI sans que les requêtes soient bloquées.

Également important est de le configurer de **manière sécurisée** — en restreignant `allow_origins` à une liste d'autorisations spécifique plutôt que le permissif `*` (et en comprenant que les identifiants sont incompatibles avec le caractère générique) — et en comprenant la conception cruciale selon laquelle **CORS est un mécanisme de navigateur, pas une autorisation API** (cela ne protège pas contre les clients non-navigateur).

Savoir comment configurer CORS correctement et de manière sécurisée est une connaissance importante au quotidien pour toute API FastAPI consommée par un frontend web.