Hvordan konfigurerer du CORS i FastAPI?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) er en browserens sikkerhedsmekanisme, der styrer, om en webside fra en **origin** kan kalde dit API på en anden origin. FastAPI konfigurerer det med det indbyggede **`CORSMiddleware`**. Du vil møde CORS, når som helst en frontend på et andet domæne/port kalder dit API.

## Problemet, som CORS løser

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

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

Middleware tilføjer de nødvendige CORS-svarshoveder, der fortæller browseren, hvilke origins, metoder og hoveder der er tilladt. Browseren håndhæver disse regler.

## Sikkerhed: begræns origins (brug ikke "*")

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

I produktion skal du **begrænse `allow_origins` til en godkendelsesliste** i stedet for `*`. Desuden kræver tilladelse af legitimationsoplysninger (cookies/autentifikation) specifikke origins — jokertegnet er ikke tilladt med legitimationsoplysninger.

## En vigtig misforståelse

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

## Hvorfor det betyder noget

CORS er en af de mest almindelige faldgruber i webudvikling — næsten enhver frontend-til-API-opsætning støder på det (især i lokal udvikling med forskellige porte og i produktion med et separat frontend-domæne), så at vide, hvordan man konfigurerer det med FastAPI's `CORSMiddleware`, er praktisk og hyppigt nødvendig viden.

At forstå *hvorfor* det eksisterer (browserens same-origin-sikkerhed), hvordan serveren tilmelder sig via svarshoveder, og hvordan man konfigurerer det (tilladte origins, metoder, hoveder, legitimationsoplysninger) er nødvendigt for at forbinde frontends til FastAPI-APIs uden, at anmodninger bliver blokeret.

Ligeledes vigtigt er det at konfigurere det **sikkert** — at begrænse `allow_origins` til en specifik liste i stedet for det tilladende `*` (og forstå, at legitimationsoplysninger ikke er kompatible med jokertegnet) — og at forstå den afgørende misforståelse, at **CORS er en browsermekanisme, ikke API-autorisering** (den beskytter ikke mod ikke-browser-klienter).

At vide, hvordan man korrekt og sikkert opsætter CORS, er vigtig daglig viden for ethvert FastAPI-API, der bruges af en webfrontend.