Kako konfigurirati CORS u FastAPI-u?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) je mehanizam sigurnosti preglednika koji kontrolira može li web stranica s jednog **origin**-a pozivati vaš API na drugom origin-u. FastAPI ga konfigurira ugrađenim **`CORSMiddleware`**. Trebat ćete CORS svaki put kad frontend na drugoj domeni/portu poziva vaš API.

## Problem koji CORS rješava

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

## Konfiguracija 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 dodaje potrebne CORS odgovore zaglavlja, koja pregledniku govore koji su origin-i, metode i zaglavlja dozvoljeni. Preglednik provodi ta pravila.

## Sigurnost: ograniči origin-e (ne koristi "*")

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

U produkciji, **ograniči `allow_origins` na whitelist** umjesto `*`. Također, dozvola kredencijala (kolačići/autentifikacija) zahtijeva specifične origin-e — wildcard nije dozvoljen s kredencijalima.

## Jedna važna zabluda

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

## Zašto je to važno

CORS je jedan od najčešćih problema u web razvoju — gotovo svaki frontend-to-API setup ga naiđe (posebno u lokalnom razvoju s različitim portovima, i u produkciji s odvojenom frontend domenom), pa znanje kako ga konfigurirati s `CORSMiddleware`-om FastAPI-ja je praktično, često potrebno znanje.

Razumijevanje *zašto* postoji (sigurnost preglednika s istim origin-om), kako se server uključuje putem odgovora zaglavlja, i kako ga konfigurirati (dozvoljeni origin-i, metode, zaglavlja, kredencijali) nužno je za povezivanje frontend-a na FastAPI API-je bez blokiranja zahtjeva.

Jednako važno je konfigurirati ga **sigurno** — ograničiti `allow_origins` na specifičan whitelist umjesto permisivnog `*` (i razumjeti da su kredencijali nespojivi s wildcard-om) — i shvatiti kritičnu zabludu da je **CORS mehanizam preglednika, nije API autorizacija** (ne štiti od ne-preglednički klijenti).

Znanje kako pravilno i sigurno postaviti CORS je važno svakodnevno znanje za bilo koji FastAPI API koji koristi web frontend.