CORS di Browser: Penyebab Error dan Cara Mengatasinya dengan Aman

Ketika JavaScript di sebuah website gagal mengambil data dari API lain, konsol browser kadang menampilkan pesan seperti “blocked by CORS policy”. Error ini sering disangka masalah pada JavaScript atau koneksi internet, padahal penyebabnya biasanya berkaitan dengan izin yang dikirim server. Memahami CORS membantu pengembang menemukan sumber masalah tanpa membuka akses API secara sembarangan.

Apa Itu CORS?

Cross-Origin Resource Sharing (CORS) adalah mekanisme berbasis header HTTP yang memungkinkan server menyatakan origin mana yang boleh membaca responsnya melalui browser. Origin terdiri dari skema atau protokol, nama host, dan port. Karena itu, https://app.example.com dan http://app.example.com dianggap berbeda; begitu pula dua alamat dengan port yang berbeda.

Browser menerapkan same-origin policy sebagai batas keamanan. Secara umum, skrip pada satu origin tidak bisa membaca respons dari origin lain kecuali server tujuan memberikan izin CORS yang sesuai. CORS bukan sistem login dan bukan pengganti autentikasi. Mekanisme ini terutama mengatur apakah kode di browser boleh membaca respons lintas origin.

Bagaimana CORS Bekerja?

Saat aplikasi menggunakan fetch() atau XMLHttpRequest untuk meminta data dari origin lain, browser menyertakan header Origin. Server kemudian dapat membalas dengan header seperti Access-Control-Allow-Origin. Jika origin peminta diizinkan dan persyaratan lainnya terpenuhi, browser memberikan respons kepada JavaScript.

Untuk permintaan tertentu, browser mengirim preflight request terlebih dahulu menggunakan metode OPTIONS. Ini umum terjadi ketika permintaan memakai metode tertentu, header khusus, atau tipe konten yang tidak termasuk kategori yang disederhanakan oleh standar. Preflight memberi server kesempatan untuk menyatakan metode dan header yang diperbolehkan sebelum browser mengirim permintaan utama.

Beberapa header yang sering ditemui:

• Access-Control-Allow-Origin: origin yang diizinkan membaca respons.
• Access-Control-Allow-Methods: metode HTTP yang diizinkan untuk permintaan lintas origin.
• Access-Control-Allow-Headers: header permintaan yang boleh digunakan.
• Access-Control-Allow-Credentials: menyatakan apakah respons dapat dibagikan ketika permintaan menyertakan kredensial.
• Access-Control-Max-Age: durasi cache hasil preflight yang dinyatakan server, dengan batas maksimum yang dapat diterapkan browser.

Penyebab Error CORS yang Umum

1. Origin tidak cocok

Server mungkin mengizinkan https://app.example.com, sedangkan aplikasi berjalan di https://www.example.com, alamat lokal, atau port lain. Cocokkan nilai origin yang terlihat pada tab Network dengan nilai yang diizinkan di konfigurasi server. Protokol, host, dan port perlu diperhatikan.

2. Preflight tidak ditangani dengan benar

Jika browser mengirim OPTIONS tetapi server, reverse proxy, atau firewall menolak permintaan tersebut, permintaan utama dapat gagal sebelum dikirim. Pastikan endpoint dan lapisan server terkait dapat menjawab preflight dengan header metode serta header yang sesuai. Jangan menganggap semua permintaan pasti menjalani preflight; periksa request yang benar-benar terlihat di browser.

3. Header atau metode belum diizinkan

Misalnya, aplikasi mengirim header Authorization atau header khusus, tetapi respons preflight tidak mencantumkannya dalam Access-Control-Allow-Headers. Periksa juga apakah metode yang digunakan, seperti PUT atau DELETE, termasuk dalam Access-Control-Allow-Methods ketika preflight memintanya.

4. Kredensial digabung dengan wildcard

Untuk permintaan yang menyertakan cookie atau kredensial lain, server tidak boleh memakai Access-Control-Allow-Origin: *. Server harus mengembalikan origin yang spesifik dan mengatur Access-Control-Allow-Credentials: true jika memang diperlukan. Aktifkan kredensial hanya untuk origin tepercaya dan sesuai kebutuhan aplikasi.

5. Respons dialihkan atau header hilang

Redirect ke login, CDN, atau endpoint lain dapat membuat alur CORS gagal, terutama pada permintaan yang membutuhkan preflight. Header CORS juga bisa hilang pada respons error karena dikonfigurasi hanya untuk respons sukses. Periksa respons aktual dari endpoint, termasuk status 401, 403, dan 5xx, serta aturan di server aplikasi, proxy, dan CDN.

Cara Memeriksa dan Memperbaiki Error CORS

1. Buka Developer Tools browser, lalu pilih tab Console untuk membaca pesan error lengkap.
2. Buka tab Network, ulangi permintaan, dan pilih request API yang gagal. Periksa URL, metode, status, header Origin, serta header CORS pada respons.
3. Jika ada request OPTIONS, periksa apakah status dan header responsnya sesuai dengan metode serta header yang diminta browser.
4. Perbaiki konfigurasi di server atau gateway API. Gunakan daftar origin yang memang dibutuhkan, izinkan metode dan header seperlunya, dan pastikan aturan berlaku juga pada respons error.
5. Ulangi pengujian dari origin aplikasi yang sebenarnya. Permintaan melalui curl atau klien server dapat membantu memeriksa header, tetapi tidak sepenuhnya meniru keputusan keamanan browser.

Jangan mencoba menyelesaikan masalah dengan menonaktifkan keamanan browser. Mode no-cors pada Fetch API juga bukan jalan pintas untuk membaca data API: responsnya menjadi opaque, sehingga JavaScript tidak dapat membaca isi dan header respons seperti biasa.

Praktik CORS yang Lebih Aman

• Izinkan hanya origin yang benar-benar memerlukan akses; hindari memantulkan nilai Origin secara otomatis tanpa validasi.
• Jangan mengaktifkan kredensial lintas origin untuk semua situs. Kombinasikan cookie dengan perlindungan autentikasi dan CSRF yang sesuai.
• Batasi metode serta header ke kebutuhan aplikasi, bukan membuka semuanya hanya agar error hilang.
• Jika respons berubah berdasarkan origin yang diminta, pertimbangkan header Vary: Origin agar cache perantara membedakan variasi respons dengan benar.
• Jika API pihak ketiga tidak mengizinkan origin website, gunakan backend milik sendiri hanya bila memang berwenang dan diperlukan. Lindungi proxy tersebut dengan autentikasi, validasi input, pembatasan laju, dan daftar tujuan yang diizinkan agar tidak menjadi proxy terbuka.

Kesimpulan

CORS adalah aturan berbagi respons lintas origin yang ditegakkan browser, sementara izin utamanya ditentukan oleh server tujuan. Saat terjadi error, mulai dari Console dan Network, cocokkan origin, lalu periksa respons preflight dan header CORS pada endpoint yang gagal. Perbaikan yang tepat adalah mengatur izin sesempit mungkin di server—bukan mematikan perlindungan browser atau memakai wildcard tanpa memahami dampaknya.

Referensi: Panduan CORS di MDN Web Docs dan Panduan memecahkan error CORS di MDN.