Hur konfigurerar du CORS i FastAPI?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) är en webbläsarens säkerhetsmekanism som kontrollerar om en webbsida från ett **origin** kan anropa ditt API på ett annat origin. FastAPI konfigurerar det med den inbyggda **`CORSMiddleware`**. Du stöter på CORS när en frontend på en annan domän/port anropar ditt 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 av 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 lägger till nödvändiga CORS-svarshuvuden som talar om för webbläsaren vilka origins, metoder och huvuden som är tillåtna. Webbläsaren tillämpar dessa regler.

## Säkerhet: begränsa origins (använd inte "*")

```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 bör du **begränsa `allow_origins` till en tillåtelselista** istället för `*`. Dessutom kräver att tillåta autentiseringsuppgifter (cookies/auth) specifika origins — wildcarden tillåts inte med autentiseringsuppgifter.

## En viktig missuppfattning

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

## Varför det är viktigt

CORS är en av de vanligaste fallgroparna inom webbutveckling — nästan varje frontend-till-API-uppsättning stöter på det (särskilt under lokal utveckling med olika portar och i produktion med en separat frontend-domän), så att kunna konfigurera det med FastAPIs `CORSMiddleware` är praktisk kunskap som ofta behövs.

Att förstå *varför* det existerar (webbläsarens samma-ursprungs-säkerhet), hur servern väljer in via svarshuvuden och hur man konfigurerar det (tillåtna origins, metoder, huvuden, autentiseringsuppgifter) är nödvändigt för att ansluta frontends till FastAPI-API:er utan att förfrågningar blockeras.

Lika viktigt är att konfigurera det **säkert** — begränsa `allow_origins` till en specifik tillåtelselista istället för den tillåtande `*` (och förstå att autentiseringsuppgifter är inkompatibla med wildcarden) — och att förstå den avgörande missuppfattningen att **CORS är en webbläsarmekanism, inte API-auktorisering** (den skyddar inte mot icke-webbläsar-klienter).

Att kunna konfigurera CORS korrekt och säkert är viktig vardaglig kunskap för alla som arbetar med FastAPI-API:er som konsumeras av en webfrontend.