{"id":32309,"date":"2026-07-29T08:00:37","date_gmt":"2026-07-29T08:00:37","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=32309"},"modified":"2026-07-29T08:00:37","modified_gmt":"2026-07-29T08:00:37","slug":"apa-itu-cors-error","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/apa-itu-cors-error","title":{"rendered":"CORS Error Sering Muncul? Kenali Penyebab dan Cara Mengatasinya"},"content":{"rendered":"

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

Masalah ini berkaitan dengan Cross-Origin Resource Sharing (CORS)<\/em>, 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.<\/p>\n

Lantas, apa sebenarnya CORS, bagaimana cara kerjanya, dan mengapa mekanisme ini sangat penting dalam pengembangan aplikasi web? Simak pembahasan berikut.<\/p>\n

Apa Itu CORS (Cross-Origin Resource Sharing)\u00a0<\/strong>?<\/h2>\n

CORS (Cross-Origin Resource Sharing)<\/em> adalah mekanisme keamanan berbasis HTTP yang memungkinkan browser mengatur apakah sebuah website atau aplikasi web dapat mengakses sumber daya dari origin<\/strong> 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.<\/p>\n

Dalam konteks web, origin <\/em>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<\/code> dan https:\/\/api.websiteB.com<\/code> termasuk dalam origin yang berbeda karena menggunakan domain yang tidak sama.<\/p>\n

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.<\/p>\n

Mengapa CORS (Cross-Origin Resource Sharing<\/strong>) Penting?<\/h2>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Memahami Same-Origin Policy<\/h2>\n

Sebelum memahami CORS, penting untuk mengenal Same-Origin Policy (SOP)<\/em>. 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.<\/p>\n

Sebagai contoh:<\/em><\/p>\n

\n
\n\n\n\n\n\n\n\n\n
URL<\/th>\nOrigin Sama?<\/th>\n<\/tr>\n<\/thead>\n
https:\/\/example.com \u2192 https:\/\/example.com<\/td>\nYa<\/td>\n<\/tr>\n
https:\/\/example.com \u2192 http:\/\/example.com<\/td>\nTidak<\/td>\n<\/tr>\n
https:\/\/example.com \u2192 https:\/\/api.example.com<\/a><\/td>\nTidak<\/td>\n<\/tr>\n
https:\/\/example.com \u2192 https:\/\/example.com:8080<\/a><\/td>\nTidak<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

CORS hadir sebagai mekanisme yang memungkinkan server memberikan pengecualian terhadap aturan Same-Origin Policy untuk kebutuhan tertentu.<\/p>\n

Cara Kerja CORS (Cross-Origin Resource Sharing<\/strong>)<\/h2>\n

Secara sederhana, CORS bekerja melalui pertukaran HTTP Header<\/em> 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.<\/p>\n

Ketika sebuah aplikasi mengirim permintaan ke server dengan origin yang berbeda, browser akan terlebih dahulu menyertakan informasi mengenai asal permintaan melalui header Origin<\/em>. 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<\/em>, sebagai tanda bahwa browser boleh melanjutkan proses pengambilan data. Setelah menerima respons tersebut, browser akan menampilkan data kepada pengguna sebagaimana mestinya.<\/p>\n

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<\/em> sering muncul saat proses integrasi API atau ketika frontend dan backend berada pada domain yang berbeda.<\/p>\n

Pada beberapa jenis permintaan, terutama yang menggunakan metode seperti PUT, DELETE<\/em>, atau mengirim header khusus, browser juga akan melakukan Preflight Request<\/em> menggunakan metode OPTIONS<\/em> 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.<\/p>\n

Proses Kerja CORS (Cross-Origin Resource Sharing<\/strong>)<\/h2>\n

Secara umum, alur kerja CORS terdiri dari beberapa tahapan berikut.<\/p>\n