Hogyan konfigurálod a CORS-t a FastAPI-ban?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) egy böngésző biztonsági mechanizmus, amely szabályozza, hogy egy **origin**-ból származó weboldal meghívhat-e egy másik origin-on található API-dat. A FastAPI a beépített **`CORSMiddleware`** segítségével konfigurálja. A CORS-sal akkor találkozol, amikor egy másik domain/port-on futó frontend meghívja az API-dat.

## A CORS által megoldott probléma

```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 konfigurálása

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

A middleware hozzáadja a szükséges CORS válaszheader-eket, amely megmondja a böngészőnek, mely origin-ok, metódusok és header-ek megengedettek. A böngésző ezeket a szabályokat érvényesíti.

## Biztonság: korlátoz az origin-okra (ne használj "*"-ot)

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

Produkcióban **korlátoz az `allow_origins`-ot egy engedélyezettlistára** ahelyett, hogy `*`-ot használnál. Ezenkívül a hitelesítési adatok engedélyezése (cookie-k/hitelesítés) meghatározott origin-okat igényel — a helyettesítő karakter nem használható hitelesítési adatokkal.

## Egy gyakori félreértés

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

## Miért fontos

A CORS a webfejlesztés egyik leggyakoribb buktatója — szinte minden frontend-API beállítás találkozik vele (különösen helyi fejlesztésben különböző portokkal, és produkcióban külön frontend domain-nel), ezért fontos tudni, hogyan kell konfigurálni FastAPI `CORSMiddleware`-jével.

Annak megértése, hogy *miért* létezik (böngésző same-origin biztonság), hogyan jegyez be rá a szerver válaszheader-eken keresztül, és hogyan kell konfigurálni (engedélyezett origin-ok, metódusok, header-ek, hitelesítési adatok) szükséges a frontend-ek FastAPI API-khoz való csatlakoztatásához anélkül, hogy a kérések blokkolva lennének.

Egyenlő mértékben fontos az **biztonságos** konfigurálása — az `allow_origins` korlátozása egy adott engedélyezettlistára ahelyett, hogy a megengedő `*`-ot használnál (és annak megértése, hogy a hitelesítési adatok inkompatibilisek a helyettesítő karakterrel) — és az a döntő félreértés megértése, hogy **a CORS egy böngésző mechanizmus, nem API-hitelesítés** (nem véd meg a nem böngésző kliensek ellen).

A CORS helyes és biztonságos beállítása fontos napi szintű tudás minden olyan FastAPI API-hoz, amelyet egy web frontend használ.