Cross-Origin Resource Sharing: Arti, Fungsi dan Cara Kerja

Cross-Origin Resource Sharing atau CORS sering ditemui saat belajar web development, terutama ketika front end dan back end saling terhubung. Banyak warga Bimbingan pertama kali mengenalnya dari error yang muncul di browser.

Bagi Warga Bimbingan yang sedang belajar web development, CORS berfungsi untuk mengatur izin akses resource antar domain. Tujuannya agar data tetap aman dan tidak bisa diakses sembarangan.

Dengan memahami arti, fungsi, dan cara kerja CORS, kamu akan lebih paham kenapa sebuah request bisa diterima atau ditolak. Yuk simak penjelasan lengkapnya supaya tidak bingung lagi saat menghadapi error CORS.

Baca juga: Panduan Lengkap Backend Developer Roadmap untuk Pemula 2025

Apa Itu Cross-Origin Resource Sharing?

Cross-Origin Resource Sharing atau CORS adalah mekanisme keamanan pada browser yang mengatur izin akses resource dari satu domain ke domain lain. 

CORS bekerja untuk melindungi data agar tidak bisa diakses sembarangan oleh website yang berbeda origin. 

Mekanisme ini memungkinkan server menentukan apakah sebuah request dari domain lain boleh diterima atau harus ditolak. 

Dengan adanya CORS, komunikasi antara front end dan back end tetap bisa berjalan tanpa mengabaikan aspek keamanan.

Baca juga: 15 Website Belajar Coding Gratis Terbaik 2025 untuk Pemula

Mengapa CORS Itu Penting?

CORS memiliki peran yang sangat penting dalam pengembangan web karena berkaitan langsung dengan keamanan data dan pengaturan akses antar domain. 

Berikut 5 alasan mengapa CORS itu penting untuk dipahami oleh setiap web developer:

1. Melindungi Data dari Akses Tidak Sah

CORS berperan penting dalam mencegah website atau aplikasi lain mengakses data tanpa izin yang jelas dari server. 

Browser akan secara otomatis memblokir request lintas domain yang tidak memiliki izin CORS. Dengan mekanisme ini, data pengguna dapat terlindungi dari potensi penyalahgunaan.

2. Mengontrol Akses Antar Domain

Melalui pengaturan CORS, server memiliki kendali penuh untuk menentukan domain mana saja yang diperbolehkan mengakses resource tertentu. 

Pengaturan ini membuat akses data menjadi lebih terkontrol dan aman. Tanpa CORS, risiko kebocoran data antar domain bisa meningkat.

3. Meningkatkan Keamanan API

Dalam aplikasi modern yang banyak mengandalkan API, CORS berfungsi sebagai lapisan keamanan tambahan. 

CORS memastikan hanya aplikasi atau domain tertentu yang dapat mengakses API. Dengan pembatasan ini, risiko penyalahgunaan API dapat diminimalkan.

4. Mendukung Arsitektur Aplikasi Modern

Pada arsitektur aplikasi modern yang memisahkan front end dan back end pada domain berbeda, CORS memungkinkan komunikasi tetap berjalan. 

Mekanisme ini memastikan pertukaran data dilakukan secara aman. Dengan CORS, pengembangan aplikasi menjadi lebih fleksibel dan terstruktur.

5. Mencegah Serangan Berbasis Browser

CORS membantu browser membatasi request lintas domain yang berpotensi berbahaya. Mekanisme ini mengurangi risiko serangan seperti pencurian data melalui request tidak sah. 

Dengan aturan CORS yang tepat, hanya request yang valid yang dapat diproses oleh server.

Baca juga: Panduan Memilih Bootcamp Back-End Development Terbaik 2025

Cara Kerja CORS

CORS bekerja sebagai mekanisme izin yang dicek oleh browser setiap kali aplikasi web mencoba mengakses resource dari domain yang berbeda. 

Untuk memudahkan pemahaman, anggap saja domain-A.com ingin mengambil data dari api.domain-B.com.

1. Permintaan Awal (Origin Request)

Saat halaman dari domain-A.com mengirim request ke api.domain-B.com, browser akan otomatis menambahkan header Origin. 

Header ini berisi informasi asal request, misalnya Origin: https://domain-A.com, sehingga server mengetahui dari mana permintaan tersebut berasal. Informasi ini menjadi dasar bagi server untuk menentukan apakah akses diperbolehkan atau tidak.

2. Permintaan Preflight (OPTIONS Request)

Jika request menggunakan metode selain GET sederhana atau memakai header kustom, browser akan mengirim request OPTIONS terlebih dahulu. 

Preflight ini berfungsi untuk menanyakan apakah server mengizinkan origin, metode HTTP, dan header tertentu. Dengan cara ini, server bisa menolak request lebih awal sebelum request utama dijalankan.

3. Respons Server dengan Header CORS

Server api.domain-B.com akan membalas dengan header CORS seperti Access-Control-Allow-Origin, Access-Control-Allow-Methods, dan Access-Control-Allow-Headers. 

Header ini berisi aturan akses yang diizinkan oleh server. Jika origin dan metode sesuai dengan aturan tersebut, browser menganggap request aman untuk dilanjutkan.

4. Eksekusi atau Pemblokiran Request

Jika izin CORS diberikan, browser akan mengirim request utama dan menerima data dari server. 

Jika izin tidak sesuai, browser akan memblokir request dan menampilkan error CORS di console. Dengan mekanisme ini, CORS memastikan data lintas domain hanya bisa diakses jika benar-benar diizinkan.

Baca juga: Panduan Golang Array: Konsep, Implementasi & Contoh Script

Cara Mengaktifkan di Server

Sumber: Canva

Untuk mengaktifkan CORS, kamu perlu mengonfigurasi server agar mengizinkan akses dari domain lain. 

Ini dilakukan dengan menambahkan header CORS pada respons server. Yuk simak cara mengaktifkan CORS di server!

1. Mengonfigurasi Header Access-Control-Allow-Origin

Header Access-Control-Allow-Origin adalah pengaturan utama yang memungkinkan atau menolak permintaan dari domain lain. 

Kamu bisa mengonfigurasi server untuk mengizinkan hanya satu domain tertentu atau menggunakan * untuk membolehkan semua domain. 

Namun, penggunaan * tidak disarankan untuk aplikasi yang berhubungan dengan data sensitif atau otentikasi pengguna.

2. Menentukan Metode HTTP yang Diizinkan

Server perlu mengonfigurasi Access-Control-Allow-Methods untuk menentukan metode HTTP mana saja yang diizinkan, seperti GET, POST, PUT, atau DELETE. 

Ini memberi server kontrol penuh untuk memastikan hanya metode yang aman dan sesuai dengan kebijakan yang digunakan oleh client. Dengan mengatur metode yang diterima, server dapat mengurangi potensi penyalahgunaan.

3. Mengizinkan Header Kustom yang Diperlukan

Jika aplikasi mengirimkan header kustom (misalnya, untuk otentikasi atau pengaturan tambahan), server harus mengizinkan header tersebut melalui Access-Control-Allow-Headers. 

Tanpa konfigurasi ini, browser akan memblokir request yang mengandung header kustom tersebut, meskipun origin-nya sudah diizinkan. Ini penting untuk aplikasi yang menggunakan header seperti Authorization atau X-Requested-With.

4. Menangani Preflight Request (OPTIONS)

Untuk permintaan yang lebih kompleks atau menggunakan metode selain GET/POST sederhana, browser akan mengirimkan request OPTIONS terlebih dahulu untuk menanyakan izin akses ke server. 

Server harus merespons dengan header yang tepat, seperti Access-Control-Allow-Methods dan Access-Control-Allow-Headers, yang menjelaskan apakah request dapat diterima. 

Jika preflight tidak diizinkan, browser akan membatalkan permintaan utama dan memberikan error CORS.

Baca juga: Apa Itu Golang Clean Code Architecture dan Manfaatnya

Tips Keamanan untuk CORS

CORS adalah mekanisme yang penting untuk mengizinkan akses lintas domain, namun tanpa pengaturan yang tepat, hal ini bisa menimbulkan potensi risiko keamanan. 

Berikut adalah 3 tips keamanan untuk mengatur CORS agar tetap aman dan mencegah akses tidak sah:

1. Batasi Akses dengan Access-Control-Allow-Origin

Jangan gunakan nilai * untuk header Access-Control-Allow-Origin di aplikasi yang menangani data sensitif. 

Sebaiknya, tentukan domain yang spesifik agar hanya aplikasi yang dipercaya yang bisa mengakses resource. Hal ini akan mencegah potensi kebocoran data ke domain yang tidak terverifikasi.

2. Gunakan Metode HTTP yang Diperlukan Saja

Sangat penting untuk hanya mengizinkan metode HTTP yang benar-benar diperlukan oleh aplikasi, untuk menghindari potensi penyalahgunaan. 

Batasi metode yang diizinkan melalui Access-Control-Allow-Methods, seperti GET dan POST, sesuai dengan kebutuhan aplikasi. 

Dengan mengatur metode yang lebih ketat, kamu bisa mengurangi risiko akses yang tidak diinginkan atau berbahaya, seperti DELETE atau PUT, yang bisa mengubah data secara tidak sah.

3. Perhatikan Kredensial dengan Access-Control-Allow-Credentials

Jika aplikasi membutuhkan pengiriman kredensial seperti cookie atau token, aktifkan header Access-Control-Allow-Credentials dengan nilai true. 

Pastikan kamu tidak menggunakan * untuk Access-Control-Allow-Origin ketika kredensial diaktifkan, karena ini bisa membuka celah bagi serangan. 

Kredensial hanya boleh dikirim ke domain yang sudah terverifikasi dan dipilih secara eksplisit.

Ingin Jadi Back End Developer Profesional?

Setelah mempelajari dasar-dasar pemrograman, kini saatnya mengasah kemampuan kamu dalam mengembangkan aplikasi dengan back end yang kuat dan efisien!

Yuk, ikuti Bootcamp Back End Developer di dibimbing.id! Di sini, kamu akan mempelajari cara membangun sistem back end, mengelola database, membuat API, dan mengoptimalkan server.

Belajar langsung dari mentor berpengalaman dengan kurikulum aplikatif yang dirancang untuk memberikan pemahaman mendalam tentang pengembangan back end. Dengan pendekatan praktis, kamu akan siap menghadapi tantangan dunia kerja.

Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia IT semakin terbuka lebar!

Jadi, tunggu apa lagi? Hubungi kami disini dan daftar sekarang di dibimbing.id, lalu mulai perjalananmu menjadi Back End Developer profesional. #BimbingSampeJadi!