Kuinka konfiguroisit CORS:n FastAPI:ssa?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) on selaimen suojaustoiminto, joka hallitsee, voiko yhden **alkuperän** verkkosivusto kutsua API:si eri alkuperässä. FastAPI konfiguroi sen sisäänrakennetulla **`CORSMiddleware`** -ohjelmistolla. Kohtaat CORS:n aina, kun eri toimialueella/portissa oleva frontend kutsuu API:si.

## Ongelma, jonka CORS ratkaisee

```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:n konfigurointi

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

Ohjelmisto lisää tarvittavat CORS-vastaustunnisteet, joiden avulla selain saa tietää, mitä alkuperää, menetelmiä ja tunnisteet ovat sallittuja. Selain pakottaa nämä säännöt.

## Turvallisuus: rajoita alkuperää (älä käytä "*")

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

Tuotannossa **rajoita `allow_origins` sallimusjärjestelmään** `*` sijaan. Lisäksi valtakirjojen (evästeet/todennus) salliminen vaatii tiettyjä alkuperää — jokeromerkkia ei sallita valtakirjojen kanssa.

## Keskeinen väärinkäsitys

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

## Miksi tämä on tärkeää

CORS on yksi yleisimmistä verkkokehityksen esteitä — lähes jokainen frontend-API-asennus kohtaa sen (erityisesti paikallisessa kehityksessä eri porteilla ja tuotannossa erillisellä frontend-toimialueella), joten tietää, kuinka se konfiguroidaan FastAPI:n `CORSMiddleware`:llä, on käytännöllistä ja usein tarvittavaa tietoa.

Ymmärtäminen *miksi* se olemassa (selaimen same-origin-turvallisuus), kuinka palvelin liittyy vastaustunnisteiden kautta ja kuinka se konfiguroidaan (sallitut alkuperät, menetelmät, tunnisteet, valtakirjat) on välttämätöntä, jotta frontendeja voidaan yhdistää FastAPI-API:hin ilman pyyntöjen estämistä.

Yhtä tärkeää on konfiguroida se **turvallisesti** — rajoita `allow_origins` tiettyyn luetteloon sallivan `*` sijaan (ja ymmärrä, että valtakirjat eivät ole yhteensopivia jokeromerkin kanssa) — ja ymmärrä kriittinen väärinkäsitys, että **CORS on selaimen mekanismi, ei API-valtuutus** (se ei suojaa ei-selaimen asiakkaita vastaan).

Tietää, kuinka CORS konfiguroidaan oikein ja turvallisesti, on tärkeää päivittäistä tietoa mille tahansa web-frontendin käyttämälle FastAPI-API:lle.