CORS คืออะไร และคุณจัดการมันใน Node ได้อย่างไร?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) เป็นกลไกความปลอดภัยของเบราว์เซอร์ที่ควบคุมว่าเพจเว็บจาก **origin** หนึ่งสามารถส่งคำขอไปยังเซิร์ฟเวอร์บน **origin ที่แตกต่าง** ได้หรือไม่ โดยค่าเริ่มต้น เบราว์เซอร์จะบล็อกคำขอข้ามแหล่งกำเนิด เซิร์ฟเวอร์ต้องอนุญาตให้ใช้อย่างชัดแจ้งผ่านส่วนหัว response

## นโยบายเดียวกันแหล่งกำเนิดและปัญหา

```text
Origin = scheme + host + port. These are DIFFERENT origins:
  https://app.example.com   →  https://api.example.com   (different host)
  http://localhost:3000     →  http://localhost:4000      (different port)

Browser blocks the cross-origin request UNLESS the server sends CORS headers allowing it.
```

ดังนั้นแอป React บน `localhost:3000` เรียก API บน `localhost:4000` คือ cross-origin — เบราว์เซอร์จะบล็อกมันเว้นแต่ API จะเลือกอนุญาต

## ส่วนหัว response หลัก

```text
Access-Control-Allow-Origin: https://app.example.com   ← who is allowed
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   ← allowed methods
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true                 ← allow cookies/auth
```

เซิร์ฟเวอร์ควบคุมการเข้าถึงโดยการส่งส่วนหัวเหล่านี้ เบราว์เซอร์อ่านพวกมันและตัดสินใจว่าจะอนุญาตให้เพจเห็น response หรือไม่

## จัดการ CORS ใน Express

```js
import cors from "cors";

// ❌ allow everything — convenient but insecure for credentialed/private APIs
app.use(cors());

// ✅ restrict to specific trusted origins
app.use(cors({
  origin: ["https://app.example.com", "http://localhost:3000"], // allowlist
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true, // allow cookies — REQUIRES a specific origin (not "*")
}));
```

middleware `cors` ตั้งค่าส่วนหัวให้คุณ สำหรับการผลิต **จำกัด `origin` ไปยัง allowlist** แทนที่จะใช้ `*` — และสังเกตว่าอนุญาต credentials (`credentials: true`) นั้นเข้ากันไม่ได้กับ wildcard `*`

## คำขอ Preflight

```text
For "non-simple" requests (PUT/DELETE, custom headers, JSON), the browser first
sends an OPTIONS "preflight" request to check permissions. The cors middleware
handles responding to it automatically.
```

## ข้อความเข้าใจผิดทั่วไป

```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.
It only governs what browser JavaScript on other origins can do.
```

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

CORS เป็นหนึ่งในอุปสรรคที่พบได้บ่อยที่สุดในการพัฒนาเว็บ — เกือบทุกการตั้งค่า front-end-to-API จะพบมัน (โดยเฉพาะอย่างยิ่งในการพัฒนาในเครื่องด้วยพอร์ตต่างกัน)

การเข้าใจ *ว่าทำไม* มันจึงมีอยู่ (ความปลอดภัยของเบราว์เซอร์ same-origin) วิธีที่เซิร์ฟเวอร์เลือก opt in ผ่านส่วนหัว วิธีกำหนดค่าอย่างปลอดภัย (allowlist origins, การจัดการ credentials อย่างระมัดระวัง) และข้อเท็จจริงที่สำคัญว่ามันเป็นกลไก *เบราว์เซอร์* (ไม่ใช่ authorization API) จำเป็นสำหรับการเชื่อมต่อ front-ends กับ Node APIs อย่างถูกต้องและปลอดภัยโดยไม่ถูกบล็อกหรือ over-expose เซิร์ฟเวอร์