Access-Control-Allow-Origin

Penggunaan

Catatan

CORS (Cross-Origin Resource Sharing) adalah mekanisme browser yang memblokir halaman web agar tidak membaca respons yang disajikan oleh origin berbeda, kecuali server secara eksplisit mengizinkan akses tersebut. Browser menyetel header Origin secara otomatis pada permintaan lintas origin. JavaScript tidak dapat mengubah header Origin.

Setiap respons CORS menyertakan Access-Control-Allow-Origin untuk memberi tahu browser apakah kode front-end dari origin tertentu diizinkan membaca respons tersebut. Tanpa nilai yang cocok, browser memblokir respons sehingga tidak sampai ke JavaScript.

Server yang memilih untuk mengizinkan akses memiliki tiga opsi: wildcard, origin eksplisit, atau null. Sebagian besar API produksi memilih origin secara dinamis dengan membandingkan header permintaan Origin yang masuk terhadap sebuah daftar izin. Ketika origin cocok, server memantulkan kembali nilai tersebut. Karena respons berubah tergantung pada permintaan, header Vary: Origin diperlukan agar cache menyimpan salinan terpisah untuk setiap origin.

Apa yang memicu CORS

Setiap fetch() atau XMLHttpRequest ke origin berbeda memicu penegakan CORS. Pemuatan font melalui @font-face, tekstur WebGL, dan canvas.drawImage() terhadap gambar lintas origin juga memicu pemeriksaan CORS. Permintaan yang membawa header kustom, metode non-sederhana seperti PUT, DELETE, atau PATCH, atau Content-Type application/json akan memicu permintaan preflight OPTIONS sebelum permintaan sebenarnya dikirim. Navigasi standar seperti mengeklik tautan atau memuat halaman di browser tidak memicu CORS.

* (wildcard)

Mengizinkan origin mana pun membaca respons. Wildcard hanya valid untuk permintaan tanpa kredensial.

Access-Control-Allow-Origin: *

Catatan

Wildcard tidak kompatibel dengan permintaan berkredensial. Ketika Access-Control-Allow-Credentials bernilai true, server harus mengembalikan origin eksplisit.

Origin eksplisit

Satu nilai origin yang terdiri dari skema, nama host, dan port opsional. Ini adalah pendekatan standar untuk API yang dibatasi pada pemanggil yang sudah dikenal.

Access-Control-Allow-Origin: https://example.com

Hanya satu origin yang diizinkan per respons. Server yang mendukung banyak origin memeriksa header permintaan Origin dan membalas dengan nilai yang cocok, sambil menambahkan Vary: Origin ke respons.

null

Mewakili origin yang opak atau sensitif terhadap privasi. Beberapa dokumen dalam sandbox dan URL berkas lokal mengirimkan null sebagai origin mereka.

Access-Control-Allow-Origin: null

Catatan

Membalas dengan null tidak dianjurkan. Dokumen berbahaya dari iframe dalam sandbox juga membawa origin null, sehingga nilai ini mudah dipalsukan.

Contoh

Sebuah server secara dinamis mencerminkan origin pemohon dan menyertakan header Vary agar perilaku cache tetap benar.

Access-Control-Allow-Origin: https://example.com
Vary: Origin

Sebuah CDN publik yang menyajikan aset statis ke pemanggil mana pun menggunakan wildcard.

Access-Control-Allow-Origin: *

Sebuah respons lintas origin berkredensial memasangkan origin eksplisit dengan header kredensial.

Access-Control-Allow-Origin: https://dashboard.example.re
Access-Control-Allow-Credentials: true
Vary: Origin

Pemecahan masalah

Permintaan lintas origin gagal ketika browser tidak dapat mencocokkan origin respons dengan halaman yang mengajukan permintaan.

Konsol menampilkan “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” Server sama sekali tidak menyertakan header tersebut. Pastikan konfigurasi CORS di sisi server berlaku untuk rute dan metode HTTP yang bersangkutan. Pada nginx, pastikan direktif add_header berada di dalam blok location yang benar. Pada Apache, pastikan Header set berada di dalam atau yang cocok. Uji dengan curl untuk memisahkan masalah ini dari perilaku browser: curl -v -H “Origin: https://example.com” https://api.example.re/data

Wildcard * tidak berfungsi dengan permintaan berkredensial. Browser menolak respons yang memasangkan Access-Control-Allow-Origin: * dengan Access-Control-Allow-Credentials: true. Perbaikannya adalah membaca header Origin yang masuk, memvalidasi nilainya terhadap daftar izin, lalu memantulkan kembali origin yang cocok. Tambahkan Vary: Origin ke respons agar cache menyimpan salinan terpisah per origin.

Pemantulan origin tanpa validasi. Memantulkan header permintaan Origin apa adanya tanpa memeriksa daftar izin membuka API bagi domain mana pun. Penyerang memanfaatkan hal ini untuk mencuri data melalui halaman yang mereka kendalikan. Selalu bandingkan origin yang masuk dengan daftar nilai tepercaya sebelum memantulkannya.

CDN menyimpan cache respons dengan origin yang salah. Ketika server mengembalikan nilai origin dinamis tetapi menghilangkan Vary: Origin, CDN menyimpan nilai origin pertama dan menyajikan respons tersimpan yang sama ke setiap origin berikutnya. Tambahkan Vary: Origin pada setiap respons yang memantulkan origin dinamis. Pada Cloudflare, hal ini ditangani secara otomatis ketika menggunakan CORS managed transform. Pada CDN lain, pastikan origin menjadi bagian dari kunci cache.

Preflight berhasil tetapi permintaan sebenarnya gagal. Respons OPTIONS menyertakan header CORS, tetapi respons GET, POST, atau PUT lanjutannya tidak. Banyak framework server menangani OPTIONS secara terpisah dari metode lain. Pastikan header CORS ditambahkan ke semua jenis respons, bukan hanya ke respons preflight. Pada Express, tempatkan middleware CORS sebelum handler rute agar setiap respons melewati middleware tersebut.

Pengawakutuan dengan curl menunjukkan header sudah benar tetapi browser tetap memblokir. Buka DevTools, masuk ke tab Network, dan periksa header respons yang sebenarnya diterima browser. Proxy, penyeimbang beban, atau aturan edge CDN kadang menghapus atau menimpa header CORS antara server origin dan browser. Bandingkan keluaran curl dengan keluaran DevTools untuk menemukan lapisan yang menghapus header tersebut.