Apakah CORS dan bagaimana menanganinya di Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) ialah mekanisme keamanan pelayar yang mengawal sama ada halaman web dari satu **origin** boleh membuat permintaan ke pelayan pada **origin yang berbeza**. Secara lalai, pelayar menyekat permintaan lintas-origin; pelayan mesti membenarkannya secara eksplisit melalui header tindak balas.

## Polisi same-origin dan masalahnya

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

Jadi aplikasi React di `localhost:3000` yang memanggil API di `localhost:4000` ialah lintas-origin — pelayar menyekatnya kecuali API memilih untuk mengizinkan.

## Header tindak balas utama

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

Pelayan mengawal akses dengan menghantar header ini. Pelayar membacanya dan memutuskan sama ada untuk membenarkan halaman melihat tindak balas.

## Menangani CORS dalam 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` menetapkan header untuk anda. Untuk pengeluaran, **hadkan `origin` ke senarai yang dibenarkan** dan bukannya `*` — dan perhatikan bahawa membenarkan kredensial (`credentials: true`) tidak serasi dengan wildcard `*`.

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

## Salah tanggapan biasa

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

## Mengapa ia penting

CORS ialah salah satu halangan paling biasa dalam pembangunan web — hampir setiap persediaan front-end ke API menghadapinya (terutama dalam pembangunan tempatan dengan port yang berbeza).

Memahami *mengapa* ia wujud (keamanan same-origin pelayar), cara pelayan memilih melalui header, cara mengonfigurnya dengan selamat (asal yang dibenarkan, pengendalian kredensial yang berhati-hati), dan fakta penting bahawa ia ialah mekanisme *pelayar* (bukan kebenaran API) adalah penting untuk menyambung front-end ke Node API dengan betul dan selamat tanpa tersangkut atau terlalu mendedahkan pelayan.