คุณจะตั้งค่า CORS ใน FastAPI อย่างไร?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) เป็นกลไกความปลอดภัยของเบราว์เซอร์ที่ควบคุมว่าเว็บเพจจาก **origin** หนึ่งจะสามารถเรียก API ของคุณที่อยู่คนละ origin ได้หรือไม่ FastAPI ตั้งค่าเรื่องนี้ด้วย **`CORSMiddleware`** ที่มีมาให้ในตัว คุณจะเจอ CORS เมื่อใดก็ตามที่ frontend บนคนละ domain/port เรียก API ของคุณ

## ปัญหาที่ 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)
```

## การตั้งค่า 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 จะเพิ่ม CORS response header ที่จำเป็น เพื่อบอกเบราว์เซอร์ว่า origin, method และ header ใดบ้างที่ได้รับอนุญาต เบราว์เซอร์เป็นผู้บังคับใช้กฎเหล่านี้

## ความปลอดภัย: จำกัด origin (อย่าใช้ "*")

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

สำหรับ production ควร **จำกัด `allow_origins` ให้เป็น allowlist** แทนการใช้ `*` นอกจากนี้ การอนุญาต credentials (cookies/auth) จำเป็นต้องระบุ origin ที่เฉพาะเจาะจง — ไม่อนุญาตให้ใช้ wildcard ร่วมกับ credentials

## ความเข้าใจผิดที่สำคัญ

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

## ทำไมจึงสำคัญ

CORS เป็นหนึ่งในอุปสรรคที่พบบ่อยที่สุดในการพัฒนาเว็บ — แทบทุกการเชื่อมต่อ frontend-to-API ต้องเจอกับมัน (โดยเฉพาะตอนพัฒนาในเครื่องที่ใช้คนละ port และใน production ที่มี frontend แยก domain) ดังนั้นการรู้วิธีตั้งค่ามันด้วย `CORSMiddleware` ของ FastAPI จึงเป็นความรู้เชิงปฏิบัติที่ต้องใช้บ่อย

การเข้าใจ *ว่าทำไม* มันถึงมีอยู่ (ความปลอดภัยแบบ same-origin ของเบราว์เซอร์), วิธีที่ server เลือกเข้าร่วมผ่าน response header และวิธีตั้งค่ามัน (origin, method, header, credentials ที่อนุญาต) เป็นสิ่งจำเป็นในการเชื่อมต่อ frontend กับ FastAPI API โดยไม่ถูกบล็อก request

ที่สำคัญพอ ๆ กันคือการตั้งค่ามันอย่าง **ปลอดภัย** — จำกัด `allow_origins` ให้เป็น allowlist ที่เฉพาะเจาะจงแทนการใช้ `*` ที่อนุญาตทุกอย่าง (และเข้าใจว่า credentials ใช้ร่วมกับ wildcard ไม่ได้) — และเข้าใจความเข้าใจผิดที่สำคัญว่า **CORS เป็นกลไกของเบราว์เซอร์ ไม่ใช่การ authorize API** (มันไม่ได้ป้องกัน client ที่ไม่ใช่เบราว์เซอร์)

การรู้วิธีตั้งค่า CORS อย่างถูกต้องและปลอดภัยเป็นความรู้พื้นฐานที่ใช้ในชีวิตประจำวันสำหรับ FastAPI API ใด ๆ ที่ถูกเรียกใช้โดย web frontend