CORS (Cross-Origin Resource Sharing) — Web Fundamentals

CORS adalah mekanisme keamanan browser yang mengontrol apakah sebuah halaman web boleh mengakses resource dari domain (origin) yang berbeda. Apa itu Origin? Ori

CORS adalah mekanisme keamanan browser yang mengontrol apakah sebuah halaman web boleh mengakses resource dari domain (origin) yang berbeda.

Apa itu Origin? Origin adalah kombinasi dari protocol + hostname + port:

https://belajarweb.dev:443 — satu origin
https://api.belajarweb.dev:443 — origin berbeda (subdomain beda)
http://belajarweb.dev:80 — origin berbeda (protocol beda)

Same-Origin Policy (SOP): Browser secara default melarang JavaScript di satu origin mengakses resource dari origin lain. Ini mencegah website jahat mencuri data dari website lain.

// Dari https://mysite.com, request ke origin berbeda:
fetch("https://api.example.com/data")
  // ❌ Blocked by CORS policy!

Bagaimana CORS bekerja:

Browser menambahkan header Origin ke request
Server memeriksa origin dan membalas dengan header CORS
Browser memeriksa header CORS — jika cocok, response diterima

Simple requests (GET, POST dengan form data):

Request:
Origin: https://mysite.com

Response:
Access-Control-Allow-Origin: https://mysite.com

Preflight requests (PUT, DELETE, custom headers): Browser mengirim OPTIONS request dulu untuk minta izin:

OPTIONS /api/users
Origin: https://mysite.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: Authorization

Response:
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization
Access-Control-Max-Age: 86400

Header CORS penting:

Header	Fungsi
`Access-Control-Allow-Origin`	Origin mana yang boleh akses
`Access-Control-Allow-Methods`	Method HTTP yang diizinkan
`Access-Control-Allow-Headers`	Header custom yang diizinkan
`Access-Control-Allow-Credentials`	Boleh kirim cookies?
`Access-Control-Max-Age`	Berapa lama cache preflight (detik)

Setting CORS di server (Express.js):

const cors = require("cors");

app.use(cors({
  origin: ["https://mysite.com", "https://admin.mysite.com"],
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true,
  maxAge: 86400
}));

Kesalahan umum:

Access-Control-Allow-Origin: * tidak bisa dipakai bersama credentials: true
CORS hanya berlaku di browser — API calls dari server ke server tidak terkena CORS
CORS bukan pengganti authentication — ia hanya mengontrol akses browser