Hoe configureer je CORS in FastAPI?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) is een browser-beveiligingsmechanisme dat bepaalt of een webpagina van één **origin** je API op een ander origin mag aanroepen. FastAPI configureert dit met de ingebouwde **`CORSMiddleware`**. Je stuit op CORS wanneer een frontend op een ander domein/port je API aanroept.

## Het probleem dat CORS oplost

```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)
```

## CORSMiddleware configureren

```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=["*"],
)
```

De middleware voegt de nodige CORS-response headers toe, die de browser vertellen welke origins, methoden en headers zijn toegestaan. De browser handhaaft deze regels.

## Beveiliging: beperk origins (gebruik niet "*")

```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=["*"]
```

In productie moet je **`allow_origins` beperken tot een allowlist** in plaats van `*`. Bovendien vereist het toestaan van credentials (cookies/authenticatie) specifieke origins — het wildcard-teken is niet toegestaan met credentials.

## Een belangrijk misverstand

```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.
```

## Waarom het belangrijk is

CORS is een van de meest voorkomende struikelblokken in webontwikkeling — vrijwel elke frontend-naar-API setup loopt ertegenaan (vooral in lokale ontwikkeling met verschillende ports en in productie met een apart frontend-domein), dus weten hoe je het configureert met FastAPI's `CORSMiddleware` is praktische, veel-gebruikte kennis.

Begrijpen *waarom* het bestaat (browser same-origin beveiliging), hoe de server ermee instemt via response headers, en hoe je het configureert (toegestane origins, methoden, headers, credentials) is noodzakelijk om frontends met FastAPI API's te verbinden zonder dat verzoeken worden geblokkeerd.

Evenso belangrijk is het configureren **veilig** — `allow_origins` beperken tot een specifieke allowlist in plaats van het permissieve `*` (en begrijpen dat credentials incompatibel zijn met het wildcard-teken) — en het cruciale misverstand begrijpen dat **CORS een browsermechanisme is, geen API-autorisatie** (het beschermt niet tegen niet-browser clients).

Weten hoe je CORS correct en veilig inricht is belangrijke dagelijkse kennis voor elke FastAPI API die door een web-frontend wordt gebruikt.