Cara Mengatasi CORS Error di JavaScript & Laravel

Cara Mengatasi CORS Error di JavaScript (Fetch, Axios, & Laravel)

CORS error adalah salah satu masalah yang paling sering membuat frustrasi developer web, terutama saat menghubungkan frontend dengan backend atau API. Error ini biasanya muncul dengan pesan yang menyebut "blocked by CORS policy" di console browser, membuat permintaan data gagal. Artikel ini menjelaskan apa itu CORS, mengapa error terjadi, dan bagaimana cara mengatasinya baik dari sisi frontend maupun backend.

Apa Itu CORS dan Mengapa Ada?

CORS adalah singkatan dari Cross-Origin Resource Sharing. Ini adalah mekanisme keamanan yang diterapkan browser untuk mengatur bagaimana sebuah website bisa meminta data dari domain yang berbeda. Secara default, browser menerapkan kebijakan same-origin, yang membatasi permintaan hanya ke domain yang sama demi keamanan pengguna.

Ketika frontend Anda yang berjalan di satu domain mencoba mengambil data dari API di domain lain, browser akan memeriksa apakah server tujuan mengizinkan permintaan tersebut. Jika server tidak mengirim header yang menyatakan izin, browser memblokir respons dan memunculkan CORS error. Penting dipahami bahwa ini adalah fitur keamanan browser, bukan bug pada kode Anda.

Memahami Akar Masalah CORS

Poin krusial yang sering disalahpahami pemula adalah bahwa CORS error sebenarnya harus diselesaikan di sisi server, bukan sepenuhnya di frontend. Browser hanya menjalankan aturan; yang menentukan izin adalah server yang menyediakan data. Server perlu mengirimkan header khusus bernama Access-Control-Allow-Origin untuk memberi tahu browser bahwa permintaan dari domain tertentu diizinkan.

Karena itu, meskipun error muncul di console frontend, solusi utamanya biasanya berada di konfigurasi backend. Memahami hal ini menghindarkan Anda dari upaya sia-sia mencari solusi hanya di sisi JavaScript, padahal akar masalahnya ada di pengaturan server.

Mengatasi CORS di Laravel

Jika backend Anda menggunakan Laravel, kabar baiknya adalah Laravel sudah menyediakan dukungan CORS bawaan. Konfigurasi CORS diatur dalam file config/cors.php. Di sana Anda bisa menentukan domain mana yang diizinkan mengakses API Anda, metode HTTP apa yang diperbolehkan, dan header yang diizinkan.

// config/cors.php
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['https://frontendanda.com'],
'allowed_headers' => ['*'],

Pada contoh di atas, kita mengizinkan permintaan ke rute api dari domain frontend tertentu. Untuk pengembangan, Anda bisa mengizinkan semua origin, tetapi di produksi sangat disarankan membatasi hanya ke domain yang tepercaya demi keamanan. Setelah mengubah konfigurasi, jangan lupa membersihkan cache agar perubahan diterapkan.

Menangani CORS dengan Fetch dan Axios

Di sisi frontend, baik menggunakan Fetch API maupun Axios, pola permintaannya serupa. Perlu dipahami bahwa dari sisi frontend, Anda tidak bisa "mematikan" CORS karena itu adalah kebijakan browser. Namun, Anda perlu memastikan permintaan dikonfigurasi dengan benar. Contoh permintaan dengan Fetch:

fetch('https://api.contoh.com/data', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Jika permintaan seperti ini masih menghasilkan CORS error, hampir pasti masalahnya ada di server yang belum mengizinkan origin Anda. Pastikan header di backend sudah diatur dengan benar sesuai penjelasan sebelumnya.

Solusi Sementara untuk Pengembangan

Selama tahap pengembangan di lokal, ada beberapa cara praktis untuk mengatasi CORS. Salah satunya adalah menggunakan proxy pada development server, yang membuat permintaan seolah berasal dari domain yang sama. Cara ini umum digunakan pada proyek frontend modern. Namun, solusi semacam ini hanya untuk pengembangan lokal dan tidak boleh diandalkan di produksi.

Hindari godaan menggunakan ekstensi browser yang menonaktifkan CORS sebagai solusi permanen. Meski praktis untuk pengujian cepat, cara ini hanya berlaku di browser Anda sendiri dan tidak menyelesaikan masalah bagi pengguna lain. Solusi sejati tetap harus berada di konfigurasi server.

Tips Mencegah CORS Error

Agar terhindar dari CORS error di kemudian hari, rencanakan konfigurasi CORS sejak awal pengembangan API. Tentukan domain frontend yang akan mengakses API dan atur izinnya dengan tepat. Dokumentasikan pengaturan ini agar mudah disesuaikan ketika ada perubahan domain. Dengan perencanaan yang baik, CORS tidak lagi menjadi kendala yang mengganggu.

Preflight Request dan Cara Kerjanya

Untuk memahami CORS lebih dalam, penting mengenal konsep preflight request. Pada permintaan tertentu yang dianggap "kompleks" oleh browser — misalnya permintaan dengan metode selain GET atau yang membawa header khusus — browser tidak langsung mengirim permintaan utama. Sebaliknya, browser terlebih dahulu mengirim permintaan pendahuluan menggunakan metode OPTIONS untuk menanyakan apakah server mengizinkan permintaan tersebut.

Server kemudian merespons preflight ini dengan header yang menyatakan metode dan header apa saja yang diizinkan. Jika respons preflight menunjukkan bahwa permintaan diperbolehkan, barulah browser mengirim permintaan utama. Jika tidak, browser membatalkan permintaan dan memunculkan CORS error. Memahami mekanisme ini menjelaskan mengapa terkadang Anda melihat permintaan OPTIONS tambahan di tab Network browser sebelum permintaan sebenarnya.

Pengetahuan tentang preflight ini penting saat men-debug CORS. Jika permintaan sederhana berhasil tetapi permintaan yang lebih kompleks gagal, kemungkinan besar masalahnya ada pada bagaimana server menangani permintaan preflight OPTIONS. Pastikan server Anda dikonfigurasi untuk merespons permintaan OPTIONS dengan header CORS yang tepat, sehingga proses verifikasi berjalan lancar.

Kesalahan Umum saat Menangani CORS

Ada beberapa kesalahan yang sering dilakukan developer saat berhadapan dengan CORS. Kesalahan pertama adalah mencoba menyelesaikan CORS sepenuhnya dari sisi frontend, padahal solusi utamanya ada di server. Banyak waktu terbuang karena kesalahpahaman ini. Selalu ingat bahwa server yang menentukan izin akses, sehingga konfigurasi backend adalah kunci penyelesaiannya.

Kesalahan kedua adalah mengizinkan semua origin secara sembarangan di lingkungan produksi demi menghilangkan error dengan cepat. Meski cara ini menyelesaikan error, ia membuka celah keamanan karena API Anda menjadi bisa diakses dari mana saja. Selalu batasi izin hanya ke domain yang benar-benar Anda percayai ketika aplikasi sudah berjalan di produksi.

Kesalahan ketiga adalah lupa membersihkan cache konfigurasi setelah mengubah pengaturan CORS, terutama pada framework seperti Laravel. Akibatnya, perubahan yang sudah benar seolah tidak berpengaruh, membuat developer bingung. Membiasakan diri membersihkan cache setelah perubahan konfigurasi akan menghindarkan Anda dari kebingungan yang tidak perlu ini.

Menguji dan Memverifikasi Konfigurasi CORS

Setelah mengatur konfigurasi CORS di server, penting untuk menguji apakah pengaturan sudah bekerja dengan benar. Cara paling praktis adalah membuka developer tools di browser, lalu perhatikan tab Network saat permintaan dijalankan. Di sana Anda bisa melihat header respons dari server. Jika konfigurasi sudah benar, Anda akan menemukan header yang menyatakan origin Anda diizinkan. Jika header tersebut tidak ada, berarti konfigurasi server belum diterapkan dengan tepat.

Perhatikan juga pesan error di tab Console dengan teliti. Pesan CORS error biasanya cukup spesifik dalam menyebutkan apa yang bermasalah, misalnya origin yang tidak diizinkan atau header tertentu yang ditolak. Membaca pesan ini dengan cermat sering langsung menunjukkan apa yang perlu diperbaiki. Setelah melakukan perubahan konfigurasi, ingat untuk selalu membersihkan cache dan memuat ulang halaman agar pengaturan baru benar-benar diterapkan. Proses menguji secara sistematis seperti ini menghemat banyak waktu dan menghindarkan Anda dari kebingungan saat menangani masalah CORS yang tampak rumit.

Pertanyaan yang Sering Ditanyakan (FAQ)

Apakah CORS error bisa diperbaiki hanya dari frontend?

Umumnya tidak. CORS adalah kebijakan yang dikendalikan server, jadi solusi utamanya ada di konfigurasi backend. Frontend hanya perlu memastikan permintaan dibuat dengan benar.

Apakah aman mengizinkan semua origin dengan tanda bintang?

Untuk pengembangan boleh, tetapi tidak disarankan di produksi. Mengizinkan semua origin membuat API Anda bisa diakses siapa saja. Sebaiknya batasi hanya ke domain yang tepercaya.

Kenapa CORS error tidak muncul saat menguji API dengan Postman?

Karena CORS adalah kebijakan browser, sedangkan Postman bukan browser. Postman tidak menerapkan aturan CORS, sehingga permintaan berhasil meski dari browser akan diblokir.

Kesimpulan

CORS error pada dasarnya adalah mekanisme keamanan browser, bukan bug pada kode Anda. Kuncinya adalah memahami bahwa solusi utama berada di sisi server, yang perlu mengirim header izin yang tepat. Pada Laravel, hal ini mudah diatur melalui file konfigurasi CORS bawaan.

Dengan memahami cara kerja CORS dan mengatur izin server dengan benar, Anda bisa menghubungkan frontend dan backend tanpa hambatan. Hindari solusi instan yang hanya bersifat sementara, dan selalu utamakan konfigurasi yang aman terutama di lingkungan produksi. Setelah paham konsepnya, CORS error tidak lagi menjadi misteri yang menakutkan.