Apa Itu CORS?
Cross-Origin Resource Sharing (CORS) adalah mekanisme yang memungkinkan sumber daya di satu domain digunakan oleh aplikasi yang berasal dari domain lain. Dalam situasi standar, browser menerapkan kebijakan Same-Origin Policy (SOP) yang membatasi aplikasi web untuk meminta data dari domain yang berbeda. CORS memperluas kemampuan ini dengan memungkinkan akses lintas domain yang aman dan terkontrol.
Mengapa CORS Penting?
CORS memainkan peran penting dalam pengembangan web modern karena:
- Keamanan: CORS mencegah aplikasi web mengakses sumber daya dari domain lain tanpa izin eksplisit, sehingga melindungi data sensitif.
- Fleksibilitas: Dengan pengaturan yang benar, pengembang dapat memungkinkan aplikasi mereka untuk berkomunikasi dengan API atau layanan eksternal secara aman.
Cara Kerja CORS
CORS bekerja melalui pengaturan header HTTP yang ditentukan oleh server. Ketika browser mencoba mengakses sumber daya dari domain lain, ia mengirimkan permintaan dengan header tertentu. Berikut adalah langkah-langkahnya:
Permintaan Sederhana (Simple Requests):
- Browser langsung mengirimkan permintaan ke server.
- Server merespons dengan header
Access-Control-Allow-Origin
, yang menentukan domain yang diizinkan untuk mengakses sumber daya tersebut.
- Untuk permintaan yang lebih kompleks (misalnya, dengan metode HTTP seperti
PUT
atauDELETE
, atau header khusus), browser mengirimkan permintaan preflight menggunakan metodeOPTIONS
. - Server harus merespons dengan mengizinkan atau menolak permintaan tersebut.
Access-Control-Allow-Origin
: Domain yang diizinkan.Access-Control-Allow-Methods
: Metode HTTP yang diizinkan (misalnya,GET
,POST
).Access-Control-Allow-Headers
: Header khusus yang diizinkan pada permintaan.Access-Control-Max-Age
: Durasi cache untuk hasil preflight.
Contoh Pengaturan CORS
1. Konfigurasi di Server Node.js (Express):
const express = require('express');
const cors = require('cors');
const app = express();
// Menggunakan middleware CORS dengan pengaturan default
app.use(cors());
// Atau konfigurasi khusus
app.use(cors({
origin: 'https://example.com',
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type', 'Authorization']
}));
app.get('/', (req, res) => {
res.send('CORS diaktifkan!');
});
app.listen(3000, () => {
console.log('Server berjalan di port 3000');
});
2. Pengaturan di Apache:
Tambahkan konfigurasi berikut ke file .htaccess
:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://example.com"
Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>
Masalah Umum dan Solusi
CORS Error:- Masalah: Permintaan ditolak karena domain tidak diizinkan.
- Solusi: Periksa konfigurasi server Anda dan tambahkan domain yang benar ke header
Access-Control-Allow-Origin
.
OPTIONS Preflight Terjebak:
- Masalah: Permintaan preflight tidak mendapat respons yang benar.
- Solusi: Pastikan server menangani metode
OPTIONS
dengan benar dan menyertakan header yang sesuai.
Wildcard di Header:
- Masalah: Menggunakan
*
untukAccess-Control-Allow-Origin
tidak berfungsi jika permintaan menyertakan kredensial. - Solusi: Gunakan domain spesifik alih-alih wildcard untuk permintaan dengan kredensial.
Praktik Terbaik
- Hindari Wildcard (
*
): Sebisa mungkin, tentukan domain yang spesifik untuk meningkatkan keamanan. - Gunakan Middleware: Di framework seperti Express, gunakan middleware seperti
cors
untuk mengelola pengaturan CORS secara otomatis. - Periksa Kebutuhan Preflight: Minimalisir permintaan preflight dengan menyederhanakan header dan metode permintaan.
- Uji Konfigurasi: Gunakan alat seperti Postman atau browser developer tools untuk memverifikasi respons header CORS.
Kesimpulan
CORS adalah fitur penting dalam pengembangan aplikasi web modern untuk memungkinkan akses lintas domain secara aman. Dengan memahami cara kerja CORS dan mengonfigurasinya dengan benar, pengembang dapat membangun aplikasi yang aman, efisien, dan fleksibel.