Digital Transformation
CORS (Cross-Origin Resource Sharing)
TL;DR: CORS (Cross-Origin Resource Sharing) adalah standar HTTP yang mengizinkan server mendeklarasikan origin mana yang boleh mengakses resource-nya lewat browser. Tanpa CORS, browser memblokir request dari domain berbeda berdasarkan Same-Origin Policy. CORS menjadi kebutuhan dasar saat frontend dan backend berada di domain berbeda, misalnya
app.example.commemanggilapi.example.com.
Apa itu CORS?
Secara default, browser menerapkan Same-Origin Policy, sebuah aturan keamanan yang memblokir kode JavaScript membaca respons dari domain berbeda. CORS menjadi cara resmi server mengizinkan pengecualian, lewat header seperti Access-Control-Allow-Origin. Mekanisme ini bekerja di lapisan browser, bukan server, jadi tools seperti curl dan Postman tidak terdampak.
CORS sering disalahpahami sebagai pertahanan keamanan. Sebenarnya, ia adalah mekanisme relaksasi terkontrol. Yang benar-benar mengamankan endpoint adalah autentikasi dan otorisasi, misalnya JWT atau OAuth.
Cara Kerja Singkat
Ada dua jenis request CORS:
| Jenis | Karakteristik |
|---|---|
| Simple request | GET/POST/HEAD dengan header standar, browser kirim langsung |
| Preflight | Request OPTIONS otomatis sebelum request asli, untuk method seperti PUT/DELETE atau header custom |
Server merespons preflight dengan daftar origin, method, dan header yang diizinkan. Setelah disetujui, browser mengirim request sebenarnya.
Kenapa Penting?
Saat membangun arsitektur modern dengan Next.js frontend dan API terpisah, CORS adalah hambatan pertama yang muncul saat development. Konfigurasi yang terlalu longgar (Access-Control-Allow-Origin: * digabung dengan credentials) bisa membuka celah CSRF. Konfigurasi yang terlalu ketat menghalangi integrasi pihak ketiga. Referensi resmi tersedia di MDN.
Pertanyaan Umum
Apakah CORS error berarti ada masalah keamanan?
Tidak selalu. Sebagian besar CORS error adalah konfigurasi server yang belum mengizinkan origin Anda. Periksa header Access-Control-Allow-Origin di response.
Bisakah CORS dimatikan?
Tidak dari sisi browser pengguna. Yang bisa dilakukan adalah server menambahkan header CORS yang sesuai, atau menggunakan reverse proxy supaya frontend dan API tampak satu origin.