CORS Error: Faham dan Tau Solusinya!

Source: https://www.webdevolution.com/blog/ASP-NET-Cors-error-fixed/

Pernahkah kamu mengalami masalah saat mencoba mengakses data dari server yang berbeda dengan website kamu? Jika kamu pernah mencoba menampilkan RSS Feed web lain yang berformat XML atau JSON ke web/blog kamu dan ternyata tidak muncul, atau kamu mencoba mengambil data dari API menggunakan JavaScript dan mendapati pesan seperti "Access to fetch has been blocked by CORS policy", maka kamu sedang berhadapan dengan masalah yang disebut CORS Error. Tapi, apa itu CORS Error, dan bagaimana cara mengatasinya?

CORS adalah singkatan dari Cross-Origin Resource Sharing yaitu sebuah mekanisme keamanan yang diimplementasikan oleh browser untuk melindungi pengguna dari permintaan data yang tidak sah antar domain. Misalnya, jika kamu memiliki aplikasi web di domain http://example.com dan mencoba mengambil data dari API di http://api.anotherdomain.com, browser secara otomatis akan memeriksa apakah server API tersebut mengizinkan permintaan dari domain kamu. Jika izin ini tidak diberikan, browser akan memblokir permintaan tersebut dan menampilkan CORS error.

Mengapa ini terjadi? Karena tanpa mekanisme seperti CORS, aplikasi jahat dapat mencoba mencuri data dari domain lain tanpa persetujuan. Browser melindungi pengguna dengan memaksa server untuk secara eksplisit menyatakan siapa yang diizinkan mengakses data mereka melalui CORS headers. Header seperti Access-Control-Allow-Origin adalah salah satu cara server menunjukkan izin ini.

Namun, ada kalanya CORS menjadi penghalang yang membuat frustrasi, terutama saat kamu memang memerlukan API yang memanggil data dari website lain.

Lalu, bagaimana solusinya? Salah satu cara yang umum digunakan adalah dengan memanfaatkan CORS proxy. Konsep ini bekerja dengan cara mengarahkan permintaan kamu ke server proxy terlebih dahulu, yang kemudian akan meneruskan permintaan tersebut ke API tujuan. Karena permintaan antara aplikasi kamu dan proxy berada dalam domain yang sama, browser mengizinkan komunikasi ini tanpa memicu CORS error. Proxy ini kemudian mengambil data dari API tujuan dan mengembalikannya ke aplikasi kamu.

Beberapa layanan CORS Proxy bisa kamu coba gunakan secara gratis, seperti cors.lol, cors-proxy.htmldriven.com atau bahkan membuat server proxy sendiri menggunakan teknologi seperti Node.js atau Nginx. Server proxy ini akan menambahkan header Access-Control-Allow-Origin ke respons dari API, sehingga permintaan kamu dapat berhasil tanpa hambatan. Cara menggunakannya layanan-layanan proxy online dan gratis ini juga cukup mudah, biasanya kamu hanya perlu menambahkan alamat web mereka didepan alamat url data yang akan kamu panggil. Misalnya, kamu punya data API di alamat http://api.anotherdomain.com/data.json, jika kamu memanggilnya dengan layanan dari cors.lol kamu cuma perlu mengubah alamatnya menjadi https://api.cors.lol/?url=api.anotherdomain.com/data.json atau https://cors-proxy.htmldriven.com/?url=http://api.anotherdomain.com/data.json jika kamu memilih layanan htmldriven.com

Namun, perlu diingat bahwa penggunaan CORS proxy juga memiliki kelemahan. Pertama, ada risiko keamanan, terutama jika kamu menggunakan layanan proxy publik yang dapat mencatat atau memanipulasi data kamu. Kedua, ini dapat menambah latensi pada aplikasi kamu karena permintaan harus melewati server tambahan. Oleh karena itu, solusi terbaik tetaplah meminta pengelola API untuk mengonfigurasi header CORS dengan benar.

Kesimpulannya, CORS error adalah fitur keamanan browser yang penting, tetapi terkadang menjadi penghalang dalam pengembangan aplikasi web. Dengan memahami mekanisme CORS dan solusi seperti CORS proxy, kamu dapat mengatasi masalah ini dengan lebih efisien dan menjaga aplikasi kamu tetap aman serta fungsional. Jadi, ketika kamu menemui masalah ini di masa depan, kamu sudah tahu cara menghadapinya!

Keywords: CORS error, CORS proxy, solusi CORS error, cara mengatasi CORS error, pengertian CORS, Cross-Origin Resource Sharing, CORS header, API CORS, error browser CORS, proxy untuk CORS