CORS Error Sering Muncul? Kenali Penyebab dan Cara Mengatasinya

Saat mengembangkan website atau aplikasi berbasis web, Anda mungkin pernah menemukan pesan seperti “Blocked by CORS Policy” atau “Access to fetch has been blocked by CORS policy” di browser. Pesan tersebut sering muncul ketika aplikasi mencoba mengambil data dari server atau domain yang berbeda.

Masalah ini berkaitan dengan Cross-Origin Resource Sharing (CORS), yaitu mekanisme keamanan yang diterapkan oleh browser untuk mengatur komunikasi antar origin. CORS membantu memastikan bahwa sebuah website hanya dapat mengakses sumber daya dari server lain apabila telah memperoleh izin yang sesuai.

Lantas, apa sebenarnya CORS, bagaimana cara kerjanya, dan mengapa mekanisme ini sangat penting dalam pengembangan aplikasi web? Simak pembahasan berikut.

Apa Itu CORS (Cross-Origin Resource Sharing) ?

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan berbasis HTTP yang memungkinkan browser mengatur apakah sebuah website atau aplikasi web dapat mengakses sumber daya dari origin yang berbeda. Dalam pengembangan web modern, CORS berperan penting untuk memastikan proses pertukaran data antar website atau API tetap berlangsung secara aman tanpa mengabaikan kebijakan keamanan yang diterapkan oleh browser.

Dalam konteks web, origin merupakan kombinasi dari protokol (HTTP atau HTTPS), nama domain, dan nomor port. Apabila salah satu dari ketiga komponen tersebut berbeda, browser akan menganggap permintaan berasal dari origin yang berbeda. Sebagai contoh, https://websiteA.com dan https://api.websiteB.com termasuk dalam origin yang berbeda karena menggunakan domain yang tidak sama.

Ketika websiteA ingin mengambil data dari API websiteB, server tujuan harus memberikan izin melalui konfigurasi CORS. Jika izin tersebut tidak tersedia, browser akan memblokir permintaan untuk melindungi pengguna dari potensi akses data yang tidak sah. Dengan mekanisme ini, CORS menjadi salah satu komponen penting dalam menjaga keamanan komunikasi antar aplikasi web sekaligus mendukung integrasi API yang aman.

Mengapa CORS (Cross-Origin Resource Sharing) Penting?

CORS dirancang untuk melindungi pengguna dari akses data yang tidak sah antar website. Tanpa mekanisme ini, sebuah website berbahaya dapat mencoba mengambil informasi sensitif dari layanan lain yang sedang diakses oleh pengguna, seperti akun email, layanan perbankan, atau aplikasi internal perusahaan. Kondisi tersebut dapat meningkatkan risiko kebocoran data dan penyalahgunaan informasi jika tidak dibatasi oleh sistem keamanan browser.

Dengan adanya CORS, browser hanya akan mengizinkan komunikasi lintas origin apabila server tujuan secara eksplisit memberikan izin melalui konfigurasi yang sesuai. Mekanisme ini memastikan bahwa hanya website atau aplikasi yang dipercaya yang dapat mengakses sumber daya tertentu, sehingga risiko pencurian data maupun serangan berbasis web dapat diminimalkan.

Selain meningkatkan keamanan, CORS juga mendukung pengembangan aplikasi web modern yang umumnya menggunakan arsitektur terpisah antara frontend dan backend. Sebagai contoh, sebuah aplikasi frontend dapat berjalan pada satu domain, sementara layanan API berada di domain lain. Melalui konfigurasi CORS yang tepat, kedua layanan tersebut tetap dapat saling berkomunikasi dengan aman tanpa mengabaikan kebijakan keamanan browser. Oleh karena itu, CORS menjadi salah satu komponen penting dalam pengembangan website dan aplikasi web yang memanfaatkan API maupun layanan cloud.

Memahami Same-Origin Policy

Sebelum memahami CORS, penting untuk mengenal Same-Origin Policy (SOP). Same-Origin Policy adalah kebijakan keamanan browser yang secara default hanya mengizinkan sebuah website mengakses sumber daya dari origin yang sama. Artinya, website hanya dapat berinteraksi dengan server yang memiliki protokol, domain, dan port yang identik.

Sebagai contoh:

CORS hadir sebagai mekanisme yang memungkinkan server memberikan pengecualian terhadap aturan Same-Origin Policy untuk kebutuhan tertentu.

Cara Kerja CORS (Cross-Origin Resource Sharing)

Secara sederhana, CORS bekerja melalui pertukaran HTTP Header antara browser dan server untuk menentukan apakah suatu permintaan lintas origin diizinkan atau tidak. Mekanisme ini memastikan bahwa hanya website atau aplikasi yang telah mendapatkan izin dari server tujuan yang dapat mengakses data atau sumber daya tertentu.

Ketika sebuah aplikasi mengirim permintaan ke server dengan origin yang berbeda, browser akan terlebih dahulu menyertakan informasi mengenai asal permintaan melalui header Origin. Selanjutnya, server akan memeriksa apakah origin tersebut termasuk dalam daftar yang diizinkan. Jika diizinkan, server akan mengirimkan HTTP Header CORS, seperti Access-Control-Allow-Origin, sebagai tanda bahwa browser boleh melanjutkan proses pengambilan data. Setelah menerima respons tersebut, browser akan menampilkan data kepada pengguna sebagaimana mestinya.

Sebaliknya, jika server tidak mengirimkan header CORS yang sesuai atau origin yang meminta akses tidak termasuk dalam daftar yang diizinkan, browser akan langsung memblokir respons tersebut. Meskipun server sebenarnya berhasil memproses permintaan, data tidak akan dapat diakses oleh aplikasi karena browser menganggapnya melanggar kebijakan keamanan. Inilah alasan mengapa CORS Error sering muncul saat proses integrasi API atau ketika frontend dan backend berada pada domain yang berbeda.

Pada beberapa jenis permintaan, terutama yang menggunakan metode seperti PUT, DELETE, atau mengirim header khusus, browser juga akan melakukan Preflight Request menggunakan metode OPTIONS sebelum mengirim permintaan utama. Tahap ini bertujuan untuk memastikan bahwa server benar-benar mengizinkan metode dan header yang akan digunakan. Jika server memberikan respons yang sesuai, browser akan melanjutkan permintaan utama. Sebaliknya, jika izin tidak diberikan, proses akan dihentikan untuk menjaga keamanan komunikasi antar aplikasi web.

Proses Kerja CORS (Cross-Origin Resource Sharing)

Secara umum, alur kerja CORS terdiri dari beberapa tahapan berikut.

• Browser Mengirim Permintaan
  Website mengirim permintaan HTTP ke server lain menggunakan Fetch API, AJAX, atau XMLHttpRequest.

• Browser Menambahkan Header Origin
  Browser secara otomatis menyertakan header Origin yang menunjukkan asal permintaan. Contoh: Origin: https://websiteA.com

• Server Memeriksa Origin
  Server mengevaluasi apakah origin tersebut termasuk dalam daftar yang diizinkan.

• Server Mengirim Respons
  Jika diizinkan, server mengirimkan header seperti: Access-Control-Allow-Origin: https://websiteA.com, Browser kemudian mengizinkan aplikasi membaca data dari server.

Preflight Request pada CORS

Tidak semua permintaan memerlukan proses tambahan. Untuk permintaan yang dianggap lebih sensitif, browser akan mengirim Preflight Request menggunakan metode OPTIONS sebelum mengirim permintaan utama.

Tujuannya adalah untuk memastikan bahwa server benar-benar mengizinkan metode HTTP, header, atau kredensial yang akan digunakan. Jika server memberikan respons yang sesuai, browser akan melanjutkan permintaan utama. Sebaliknya, jika izin tidak diberikan, permintaan akan dihentikan sebelum mencapai tahap berikutnya.

HTTP Header yang Digunakan dalam CORS

Beberapa HTTP Header memiliki peran penting dalam mekanisme CORS.

1. Access-Control-Allow-Origin

Header ini menentukan origin mana yang diperbolehkan mengakses server.

Contoh: Access-Control-Allow-Origin: https://example.com atau Access-Control-Allow-Origin: *

Karakter * berarti server mengizinkan akses dari semua origin, meskipun penggunaannya tidak selalu disarankan untuk alasan keamanan.

2. Access-Control-Allow-Methods

Header ini menentukan metode HTTP yang diperbolehkan, seperti GET, POST, PUT, atau DELETE.

3. Access-Control-Allow-Headers

Digunakan untuk menentukan header HTTP yang boleh dikirim oleh browser.

4. Access-Control-Allow-Credentials

Header ini mengizinkan pengiriman cookie, token autentikasi, atau informasi kredensial lainnya jika memang diperlukan.

Fungsi CORS (Cross-Origin Resource Sharing)

CORS memiliki berbagai fungsi penting dalam pengembangan aplikasi web modern.

1. Meningkatkan Keamanan

CORS membantu mencegah akses data dari website yang tidak memiliki izin sehingga mengurangi risiko penyalahgunaan data oleh pihak yang tidak berwenang.

2. Mendukung Integrasi API

Banyak aplikasi modern menggunakan layanan API dari server lain. Dengan CORS, komunikasi tersebut dapat dilakukan secara aman sesuai kebijakan yang telah ditentukan.

3. Mengontrol Hak Akses

Administrator dapat menentukan domain mana saja yang diperbolehkan mengakses layanan sehingga kontrol terhadap data menjadi lebih baik.

4. Mendukung Arsitektur Modern

Pada arsitektur microservices atau aplikasi berbasis frontend dan backend terpisah, CORS memungkinkan kedua komponen tetap dapat berkomunikasi secara aman.

Penyebab Terjadinya CORS Error

CORS Error biasanya muncul ketika browser mendeteksi bahwa server belum memberikan izin akses terhadap origin tertentu. Beberapa penyebab yang paling umum meliputi:

• Header Access-Control-Allow-Origin tidak dikirim oleh server.
• Origin tidak termasuk dalam daftar domain yang diizinkan.
• Konfigurasi metode HTTP tidak sesuai.
• Header khusus yang dikirim browser tidak diizinkan oleh server.
• Preflight Request gagal diproses.
• Kesalahan konfigurasi pada web server atau API.

Cara Mengatasi CORS Error

Mengatasi CORS Error harus dilakukan pada sisi server, bukan dengan menonaktifkan fitur keamanan browser. Beberapa langkah yang dapat dilakukan antara lain:

1. Mengatur Header CORS

Pastikan server mengirimkan header seperti Access-Control-Allow-Origin, Access-Control-Allow-Methods, dan Access-Control-Allow-Headers sesuai kebutuhan aplikasi.

2. Mengizinkan Origin yang Diperlukan

Daripada menggunakan karakter *, sebaiknya tentukan hanya domain yang memang membutuhkan akses untuk meningkatkan keamanan.

3. Memastikan Preflight Request Berhasil

Jika aplikasi menggunakan metode HTTP tertentu atau mengirim header khusus, pastikan server dapat merespons permintaan OPTIONS dengan benar.

4. Memeriksa Konfigurasi Web Server

Periksa konfigurasi pada Apache, Nginx, atau framework backend yang digunakan agar pengaturan CORS telah diterapkan dengan benar.

5. Menggunakan Reverse Proxy

Dalam beberapa kasus, reverse proxy dapat digunakan agar komunikasi antara frontend dan backend tetap berada pada origin yang sama sehingga tidak memicu CORS.

Kelebihan dan Kekurangan CORS (Cross-Origin Resource Sharing)

1. Kelebihan:
CORS menawarkan berbagai manfaat bagi pengembang maupun pengguna aplikasi web.

• Meningkatkan keamanan komunikasi antar website.
• Mendukung integrasi API lintas domain.
• Memberikan kontrol akses yang lebih fleksibel.
• Mempermudah pengembangan aplikasi berbasis microservices.
• Mendukung implementasi frontend dan backend yang terpisah.

2. Kekurangan:
Meskipun bermanfaat, CORS juga memiliki beberapa keterbatasan.

• Membutuhkan konfigurasi server yang tepat.
• Kesalahan konfigurasi dapat menyebabkan aplikasi tidak dapat mengakses API.
• Penggunaan aturan yang terlalu longgar berpotensi meningkatkan risiko keamanan.
• Membutuhkan perhatian khusus saat menggunakan autentikasi berbasis cookie atau token.

Kapan CORS (Cross-Origin Resource Sharing) Digunakan?

CORS digunakan ketika sebuah website atau aplikasi web perlu mengakses sumber daya yang berasal dari origin berbeda, baik itu domain, protokol, maupun port yang tidak sama. Pada pengembangan aplikasi web modern, kondisi ini sangat umum terjadi karena frontend dan backend sering kali ditempatkan pada server atau domain yang berbeda untuk meningkatkan fleksibilitas dan skalabilitas sistem.

Salah satu contoh penerapan CORS adalah ketika aplikasi frontend mengambil data dari layanan API yang berada di domain lain. Selain itu, CORS juga digunakan saat website memuat aset seperti gambar, font, atau file JavaScript dari layanan pihak ketiga, maupun pada arsitektur microservices yang memisahkan berbagai layanan ke dalam server yang berbeda. Dalam situasi tersebut, CORS memungkinkan komunikasi antar layanan tetap berjalan dengan aman melalui mekanisme izin yang diberikan oleh server tujuan.

CORS juga banyak diterapkan pada aplikasi berbasis cloud, Single Page Application (SPA), Progressive Web App (PWA), serta aplikasi yang terintegrasi dengan layanan eksternal seperti sistem pembayaran, autentikasi, peta digital, atau media sosial. Dengan konfigurasi CORS yang tepat, pertukaran data antar aplikasi dapat dilakukan secara aman tanpa mengabaikan kebijakan keamanan browser, sehingga aplikasi tetap berfungsi dengan baik sekaligus melindungi data pengguna dari akses yang tidak sah.

Kesimpulan

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan yang memungkinkan browser mengatur akses terhadap sumber daya dari origin yang berbeda melalui HTTP Header. Teknologi ini berperan penting dalam menjaga keamanan aplikasi web sekaligus mendukung komunikasi antar layanan yang banyak digunakan pada arsitektur aplikasi modern.

Dengan memahami cara kerja, fungsi, serta penyebab CORS Error, pengembang dapat mengonfigurasi server dengan lebih tepat sehingga proses integrasi API berjalan lancar tanpa mengorbankan keamanan. Selain itu, penerapan konfigurasi CORS yang benar juga membantu menciptakan aplikasi web yang lebih stabil, aman, dan mudah dikembangkan.

Jika Anda sedang membangun website atau aplikasi berbasis web, pastikan menggunakan layanan hosting yang mendukung performa server yang optimal dan konfigurasi yang fleksibel. Hosteko menyediakan layanan domain dan hosting yang andal untuk berbagai kebutuhan website, mulai dari blog pribadi hingga aplikasi bisnis. Anda juga dapat mengunjungi blog Hosteko untuk menemukan berbagai artikel seputar hosting, keamanan website, server, dan teknologi web terbaru.