Wie konfigurierst du CORS in FastAPI?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) ist ein Sicherheitsmechanismus des Browsers, der kontrolliert, ob eine Webseite von einer **Quelle** deine API auf einer anderen Quelle aufrufen kann. FastAPI konfiguriert es mit dem integrierten **`CORSMiddleware`**. Du wirst CORS begegnen, wenn immer ein Frontend auf einer anderen Domain/Port deine API aufruft.

## Das Problem, das CORS löst

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

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

Die Middleware fügt die notwendigen CORS-Response-Header hinzu und teilt dem Browser mit, welche Quellen, Methoden und Header erlaubt sind. Der Browser erzwingt diese Regeln.

## Warum es wichtig ist

Sicherheit: Quellen einschränken (verwende nicht "*")

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

Für die Produktion solltest du **`allow_origins` auf eine Allowlist beschränken** statt auf `*`. Außerdem erfordert die Erlaubnis von Anmeldedaten (Cookies/Auth) spezifische Quellen — der Platzhalter ist nicht mit Anmeldedaten erlaubt.

## Ein wichtiger Missverständnis

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

## Warum es wichtig ist

CORS ist eines der häufigsten Stolpersteine in der Webentwicklung — fast jede Frontend-zu-API-Einrichtung trifft darauf (besonders in der lokalen Entwicklung mit verschiedenen Ports und in der Produktion mit einer separaten Frontend-Domain), daher ist es praktisches und häufig benötigtes Wissen, zu wissen, wie man es mit FastAPI's `CORSMiddleware` konfiguriert.

Das Verständnis, *warum* es existiert (Browser-Same-Origin-Sicherheit), wie sich der Server über Response-Header anmeldet und wie man es konfiguriert (erlaubte Quellen, Methoden, Header, Anmeldedaten), ist notwendig, um Frontends mit FastAPI-APIs zu verbinden, ohne dass Anfragen blockiert werden.

Gleich wichtig ist es, es **sicher zu konfigurieren** — `allow_origins` auf eine spezifische Liste zu beschränken statt auf das permissive `*` (und zu verstehen, dass Anmeldedaten nicht mit dem Platzhalter kompatibel sind) — und das entscheidende Missverständnis zu erfassen, dass **CORS ein Browser-Mechanismus ist, keine API-Autorisierung** (es schützt nicht vor Nicht-Browser-Clients).

Zu wissen, wie man CORS korrekt und sicher einrichtet, ist wichtiges alltägliches Wissen für jedes FastAPI-API, das von einem Web-Frontend genutzt wird.