CORS là gì và xử lý nó trong Node như thế nào?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) là một cơ chế bảo mật của trình duyệt kiểm soát việc một trang web từ một **origin** có thể gửi request tới server ở một **origin khác** hay không. Mặc định, trình duyệt chặn request khác origin; server phải cho phép rõ ràng qua các header phản hồi.

## Same-origin policy và vấn đề

```text
Origin = scheme + host + port. Đây là các origin KHÁC NHAU:
  https://app.example.com   →  https://api.example.com   (host khác)
  http://localhost:3000     →  http://localhost:4000      (port khác)

Trình duyệt chặn request khác origin TRỪ KHI server gửi header CORS cho phép.
```

Nên một app React tại `localhost:3000` gọi một API tại `localhost:4000` là khác origin — trình duyệt chặn nó trừ khi API chọn cho phép (opt-in).

## Các header phản hồi then chốt

```text
Access-Control-Allow-Origin: https://app.example.com   ← ai được phép
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   ← method được phép
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true                 ← cho phép cookie/auth
```

Server kiểm soát truy cập bằng cách gửi các header này. Trình duyệt đọc chúng và quyết định có cho trang xem phản hồi hay không.

## Xử lý CORS trong Express

```js
import cors from "cors";

// ❌ cho phép mọi thứ — tiện nhưng không an toàn cho API có credential/riêng tư
app.use(cors());

// ✅ giới hạn vào các origin tin cậy cụ thể
app.use(cors({
  origin: ["https://app.example.com", "http://localhost:3000"], // danh sách cho phép
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true, // cho phép cookie — YÊU CẦU origin cụ thể (không phải "*")
}));
```

Middleware `cors` đặt các header cho bạn. Cho production, **giới hạn `origin` vào danh sách cho phép** thay vì `*` — và lưu ý cho phép credential (`credentials: true`) không tương thích với wildcard `*`.

## Request preflight

```text
Với request "không đơn giản" (PUT/DELETE, header tùy biến, JSON), trình duyệt trước tiên
gửi một request OPTIONS "preflight" để kiểm tra quyền. Middleware cors tự động
lo việc phản hồi nó.
```

## Hiểu lầm thường gặp

```text
CORS được thực thi bởi TRÌNH DUYỆT, không phải server. Nó KHÔNG bảo vệ API của bạn
khỏi client không phải trình duyệt (curl, Postman, server khác) — chúng bỏ qua CORS.
Nó chỉ điều chỉnh những gì JavaScript của trình duyệt trên origin khác được làm.
```

## Tại sao điều này quan trọng

CORS là một trong những trở ngại phổ biến nhất trong phát triển web — gần như mọi thiết lập front-end-tới-API đều gặp nó (đặc biệt trong dev cục bộ với port khác nhau).

Hiểu *vì sao* nó tồn tại (bảo mật same-origin của trình duyệt), cách server opt-in qua header, cách cấu hình an toàn (danh sách origin cho phép, xử lý credential cẩn thận), và sự thật then chốt rằng nó là cơ chế *trình duyệt* (không phải phân quyền API) là thiết yếu để kết nối front-end với API Node đúng và an toàn mà không bị chặn hay phơi bày server quá mức.