Bagaimana Anda mengonfigurasi CORS di FastAPI?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) adalah mekanisme keamanan browser yang mengontrol apakah halaman web dari satu **origin** dapat memanggil API Anda di origin yang berbeda. FastAPI mengonfigurasinya dengan **`CORSMiddleware`** bawaan. Anda akan menghadapi CORS setiap kali frontend di domain/port yang berbeda memanggil API Anda.

## Masalah yang diatasi CORS

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

## Mengonfigurasi 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 menambahkan header respons CORS yang diperlukan, memberitahu browser origin, metode, dan header mana yang diizinkan. Browser menerapkan aturan ini.

## Keamanan: batasi origin (jangan gunakan "*")

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

Untuk production, **batasi `allow_origins` ke daftar whitelist** daripada `*`. Juga, mengizinkan kredensial (cookies/auth) memerlukan origin spesifik — wildcard tidak diizinkan dengan kredensial.

## Kesalahpahaman utama

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

## Mengapa ini penting

CORS adalah salah satu batu loncatan paling umum dalam pengembangan web — hampir setiap setup frontend-ke-API mengalaminya (terutama dalam pengembangan lokal dengan port berbeda, dan di production dengan domain frontend terpisah), jadi mengetahui cara mengonfigurasinya dengan `CORSMiddleware` FastAPI adalah pengetahuan praktis yang sering dibutuhkan.

Memahami *mengapa* itu ada (keamanan same-origin browser), bagaimana server opt-in melalui header respons, dan cara mengonfigurasinya (origin yang diizinkan, metode, header, kredensial) diperlukan untuk menghubungkan frontend ke API FastAPI tanpa permintaan diblokir.

Tidak kalah pentingnya adalah mengonfigurasinya **dengan aman** — membatasi `allow_origins` ke daftar whitelist spesifik daripada permisif `*` (dan memahami bahwa kredensial tidak kompatibel dengan wildcard) — dan memahami kesalahpahaman penting bahwa **CORS adalah mekanisme browser, bukan otorisasi API** (itu tidak melindungi dari klien non-browser).

Mengetahui cara menyiapkan CORS dengan benar dan aman adalah pengetahuan sehari-hari yang penting bagi setiap API FastAPI yang dikonsumsi oleh frontend web.