Access-Control-Allow-Credentials

Penggunaan

Permintaan lintas asal (cross-origin) secara bawaan tidak menyertakan kredensial seperti cookie, header Authorization, dan sertifikat klien TLS. Ketika klien menyetel mode kredensial menjadi include, server harus mengembalikan Access-Control-Allow-Credentials dengan nilai true agar browser memaparkan body dan header respons kepada skrip pemanggil.

Selama pertukaran preflight, header ini menandakan apakah permintaan sebenarnya diizinkan membawa kredensial. Jika respons preflight menghilangkan header tersebut atau menyetel nilai selain true, browser memblokir permintaan berkredensial itu sepenuhnya.

Untuk permintaan CORS sederhana (yang tanpa langkah preflight, seperti GET dasar), browser tetap memeriksa header tersebut setelah menerima respons. Jika header tidak ada, respons dibuang secara diam-diam dan tidak pernah sampai ke kode pemanggil.

Catatan

Ketika kredensial disertakan, header Access-Control-Allow-Origin harus menyebutkan origin secara eksplisit. Wildcard * tidak diizinkan bersama permintaan berkredensial.

true

Satu-satunya nilai yang valid. Menyertakan header dengan nilai true memberi tahu browser untuk memaparkan respons ketika kredensial hadir.

Access-Control-Allow-Credentials: true

Menghilangkan header atau mengirim nilai lain apa pun memberi efek yang sama: browser memperlakukan respons sebagai tanpa kredensial dan menahan body dari JavaScript.

Contoh

Sebuah aplikasi front-end mengirim fetch lintas asal dengan kredensial disertakan. Server merespons dengan header kredensial, origin eksplisit, serta direktif Vary agar cache membedakan antar origin.

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

Selama preflight untuk permintaan POST berkredensial, server mengonfirmasi metode yang diizinkan sekaligus dukungan kredensial.

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 3600
Vary: Origin

Pemecahan masalah

Permintaan lintas asal berkredensial gagal secara diam-diam ketika ada bagian mana pun dari rantai CORS yang salah konfigurasi.

Cookie tidak terkirim lintas asal meskipun server mengembalikan Access-Control-Allow-Credentials: true. Kode di sisi klien harus secara eksplisit memilih untuk mengirim kredensial. Pada Fetch API, berikan credentials: ‘include’ pada opsi permintaan. Pada XMLHttpRequest, setel withCredentials = true sebelum memanggil send(). Tanpa flag ini, browser menghapus cookie dan header Authorization dari permintaan lintas asal terlepas dari respons server.

Konsol menampilkan “Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.” Ketika Access-Control-Allow-Credentials bernilai true, header Access-Control-Allow-Origin harus berisi origin eksplisit. Baca header Origin yang masuk, validasi nilainya terhadap daftar izin, kembalikan origin yang cocok, dan tambahkan Vary: Origin pada respons. Aturan yang sama berlaku untuk Access-Control-Allow-Headers dan Access-Control-Allow-Methods: wildcard pada header tersebut diperlakukan sebagai string literal selama permintaan berkredensial.

Panggilan fetch() tidak menyertakan credentials: ‘include’. Fetch API secara bawaan menggunakan credentials: ‘same-origin’, yang mengecualikan kredensial pada permintaan lintas asal. Berikan { credentials: ‘include’ } secara eksplisit. Periksa tab Network di DevTools dan inspeksi header permintaan. Jika header Cookie tidak ada pada permintaan yang keluar, berarti klien belum memilih untuk menyertakannya.

XMLHttpRequest tidak menyetel withCredentials = true. Serupa dengan Fetch API, XMLHttpRequest tidak mengirim cookie lintas asal kecuali withCredentials disetel ke true. Properti ini harus disetel sebelum memanggil xhr.open() atau xhr.send(). Pustaka seperti Axios memaparkannya sebagai { withCredentials: true } di dalam konfigurasi permintaan.

Atribut cookie SameSite memblokir pengiriman lintas asal. Browser modern secara bawaan menggunakan SameSite=Lax ketika atribut SameSite tidak disetel. Cookie Lax tidak dikirim pada permintaan POST lintas asal maupun permintaan sub-sumber daya. Setel SameSite=None dan Secure pada cookie yang harus berpindah lintas asal. Verifikasi atribut tersebut di DevTools pada bagian Application

Cookies. Tanpa Secure, browser menolak cookie SameSite=None sepenuhnya.

Penghapusan bertahap cookie pihak ketiga memblokir kredensial. Chrome dan browser lain sedang membatasi cookie pihak ketiga. Permintaan lintas asal yang mengandalkan cookie yang disetel oleh domain berbeda semakin sering mengalami kerusakan. Jika memungkinkan, beralihlah ke autentikasi berbasis token menggunakan header Authorization, atau terapkan Storage Access API untuk meminta akses cookie secara eksplisit. Uji di Chrome dengan flag “Third-party cookie phaseout” diaktifkan untuk memunculkan masalah sebelum peluncuran.