Di era digital saat ini, banyak website yang saling terhubung satu sama lain untuk bertukar data, gambar, video, hingga API. Namun, ada satu penghalang penting yang sering ditemui para pengembang web saat melakukan request lintas domain: Cross-Origin Resource Sharing (CORS).
Jika anda pernah menemukan error seperti “Access to XMLHttpRequest has been blocked by CORS policy”, maka artikel ini cocok banget buat anda! Yuk, kita bahas tuntas tentang apa itu Cross-Origin Resource Sharing, fungsinya, hingga cara mengkonfigurasinya secara tepat!
Apa Itu Cross-Origin Resource Sharing (CORS)?
Cross-Origin Resource Sharing (CORS) adalah sebuah mekanisme keamanan yang diterapkan pada browser modern untuk mengatur permintaan HTTP lintas domain. Maksudnya, jika halaman website berasal dari satu domain (contohnya example.com) ingin mengambil data dari domain lain (misalnya api.situslain.com), maka browser akan memeriksa apakah permintaan tersebut diizinkan oleh server tujuan melalui pengaturan CORS.
Secara default, browser akan memblokir permintaan lintas domain demi alasan keamanan. Di sinilah peran policy Cross-Origin Resource Sharing menjadi penting agar komunikasi antar domain yang sah tetap bisa berjalan dengan aman.
CORS menggunakan header HTTP seperti Access-Control-Allow-Origin, Access-Control-Allow-Methods, dan Access-Control-Allow-Headers untuk menentukan apakah permintaan dari origin lain boleh diproses.
Contoh skenario umum:
- Website frontend kamu di myfrontend.com ingin mengambil data dari API di mybackend.com
- Jika server di mybackend.com tidak mengizinkan origin myfrontend.com, maka browser akan memblokir permintaan tersebut
Mengapa Cross-Origin Resource Sharing (CORS) Penting?
Penggunaan Cross-Origin Resource Sharing bukan hanya soal teknis, tapi juga soal keamanan data dan kontrol akses. Berikut beberapa manfaat utama yang perlu kamu tahu:
1. Menjaga Keamanan Aplikasi Web
CORS mencegah website jahat melakukan permintaan curang ke server lain yang bisa membahayakan data pengguna. Misalnya, jika tidak ada proteksi CORS, sebuah situs bisa diam-diam mengambil data pribadi dari situs lain yang telah kamu login sebelumnya.
2. Memberikan Akses Terkontrol
Dengan CORS, pemilik server dapat mengatur siapa saja yang boleh mengakses data mereka. Ini penting untuk layanan API publik maupun privat.
3. Mendukung Arsitektur Frontend-Backend Terpisah
Di zaman sekarang, banyak pengembang membangun frontend (React, Vue, dll.) terpisah dari backend (Node.js, Laravel, dll.). Tanpa konfigurasi CORS, komunikasi antara keduanya akan terganggu.
4. Meningkatkan Efisiensi Developer
Dengan konfigurasi yang tepat, developer tidak perlu mencari-cari solusi tidak resmi (workaround) hanya untuk mengakses API dari domain lain.
Baca Juga: Carrd.Co Adalah: Bagaimana Fungsinya untuk Website?
Bagaimana Cara Mengaktifkan dan Mengatur Cross-Origin Resource Sharing?
Cara mengaktifkan CORS tergantung pada teknologi backend yang kamu gunakan. Tapi prinsip dasarnya tetap sama: server harus mengatur respons HTTP agar menyertakan header Access-Control-Allow-Origin dan lainnya sesuai kebutuhan.
1. Mengatur CORS di Node.js (Express)
const express = require(‘express’);
const cors = require(‘cors’);
const app = express();
app.use(cors()); // Mengizinkan semua origin (kurang disarankan untuk produksi)
app.listen(3000, () => console.log(‘Server running on port 3000’));
Kamu juga bisa memberikan pengaturan lebih detail:
app.use(cors({
origin: ‘https://myfrontend.com’,
methods: [‘GET’, ‘POST’],
allowedHeaders: [‘Content-Type’]
}));
2. Mengatur CORS di Apache
Tambahkan baris berikut di .htaccess atau konfigurasi server:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “*”
</IfModule>
Tapi lebih aman kalau kamu hanya izinkan origin tertentu:
Header set Access-Control-Allow-Origin “https://myfrontend.com”
3. Mengatur CORS di Nginx
Tambahkan baris ini di konfigurasi server block:
location /api/ {
add_header ‘Access-Control-Allow-Origin’ ‘*’;
add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS’;
add_header ‘Access-Control-Allow-Headers’ ‘Content-Type’;
}
4. Mengatur CORS di Laravel
Gunakan middleware bawaan Laravel versi terbaru (8 ke atas):
use Illuminate\Http\Request;
Route::middleware([‘cors’])->group(function () {
Route::get(‘/data’, ‘DataController@index’);
});
Atau, edit file config/cors.php:
‘paths’ => [‘api/*’],
‘allowed_origins’ => [‘https://myfrontend.com’],
‘allowed_methods’ => [‘GET’, ‘POST’],
‘allowed_headers’ => [‘*’],
5. Tes Konfigurasi CORS
Kamu bisa menggunakan tool online seperti Test CORS atau langsung dari browser menggunakan fetch atau XMLHttpRequest.
Baca Juga: 10 Rekomendasi CMS Laravel Terbaik
Tips Aman Menggunakan Cross-Origin Resource Sharing
- Hindari menggunakan wildcard (*) di Access-Control-Allow-Origin untuk aplikasi yang butuh autentikasi
- Selalu cek log server saat terjadi error CORS, bisa jadi karena kesalahan header
- Gunakan HTTPS agar lebih aman dan kompatibel
- Jangan lupa tambahkan validasi tambahan di server, bukan hanya mengandalkan CORS
CORS dan Performa Aplikasi Web: Apa Hubungannya?
Selain soal keamanan, konfigurasi CORS juga berpengaruh terhadap performa aplikasi web anda, lho!
Ketika anda mengatur CORS dengan tepat, kamu bisa meminimalkan jumlah request yang gagal dan mempercepat proses fetching data dari API. Hal ini sangat penting untuk aplikasi berbasis SPA (Single Page Application) atau aplikasi mobile yang banyak menggunakan request asinkron.
Misalnya, ketika anda mengaktifkan CORS secara spesifik (hanya untuk domain tertentu), browser akan lebih cepat merespons karena tidak perlu melalui tahap preflight yang panjang. Bandingkan jika kamu salah konfigurasi dan menyebabkan setiap permintaan harus diulang, tentu ini akan memperlambat performa aplikasi dan menguras bandwidth.
Beberapa tips tambahan agar konfigurasi CORS tidak memperlambat performa:
- Gunakan metode dan header yang minimal (hanya yang dibutuhkan)
- Hindari preflight OPTIONS request jika tidak perlu
- Gunakan caching pada respons CORS, seperti Access-Control-Max-Age, agar browser tidak perlu mengecek ulang di setiap request
Dengan memperhatikan hal ini, anda bukan hanya membangun aplikasi yang aman, tapi juga cepat, ringan, dan nyaman digunakan oleh pengguna.
Kesimpulan, Saatnya Bikin Web Lebih Aman dan Modern!
Anda pernah stres gara-gara data API gagal dimuat di web karena CORS error?
Dengan mengerti dan mengkonfigurasi Cross-Origin Resource Sharing (CORS) dengan benar, kamu bisa membuat website yang aman, efisien, dan profesional — tanpa gangguan request yang ditolak browser.
Kalau anda ingin bikin website dengan backend dan frontend yang terhubung rapi, aman, dan bebas drama error, kami siap bantu! Tim SiteSpirit hadir dengan layanan profesional mulai dari pembuatan website, desain UI/UX, hingga maintenance dan SEO.
Langsung kunjungi halaman SiteSpirit untuk melihat berbagai layanan digital yang bisa bantu anda membangun kehadiran online yang lebih profesional dan optimal. Mulai dari jasa pembuatan website yang fungsional, cepat, dan mobile-friendly, hingga jasa desain website yang membuat tampilan website-mu tampil lebih menarik dan sesuai identitas brand.
Kalau websitemu butuh perawatan berkala, jangan lewatkan layanan maintenance website kami. Ingin websitemu tampil di halaman pertama Google? Serahkan pada tim SEO kami yang sudah berpengalaman. Kamu juga bisa langsung konsultasi gratis dengan tim kami untuk membahas kebutuhanmu lebih lanjut. Gak mau ribet? Langsung aja chat via WhatsApp—kami siap bantu!
