Mengapakah Saya Tidak Boleh Menetapkan Kuki daripada Respons API Silang Asal?

Pengurusan Kuki HTTP Silang Asal: Menyelesaikan Isu Pengepala

Dalam pembangunan web, menetapkan dan mendapatkan semula kuki HTTP daripada respons silang asal boleh menjadi cabaran. Keadaan ini timbul apabila anda mempunyai aplikasi bahagian hadapan yang berkomunikasi dengan API bahagian belakang yang disampaikan daripada domain yang berbeza.

Isu ini berpunca daripada dasar asal yang sama yang dikuatkuasakan oleh penyemak imbas moden, yang mengehadkan akses kepada sumber daripada asal usul yang berbeza. Apabila permintaan silang asal dibuat, penyemak imbas biasanya menolak untuk menghormati pengepala Set-Cookie dalam respons, menghalang kuki daripada disimpan secara setempat.

Senario

Pertimbangkan kes khusus ini di mana aplikasi bahagian hadapan perlu menetapkan token muat semula untuk tujuan pengesahan. API bahagian belakang menghantar pengepala Set-Cookie seperti yang dijangkakan, tetapi bahagian hadapan tidak dapat menerima dan menyimpannya.

Konfigurasi Permintaan Axios

Kod disediakan untuk menghantar permintaan dari bahagian hadapan termasuk harta withCredentials dalam objek pengepala. Ini bukan lokasi yang betul untuk hartanah ini. withCredentials hendaklah ditetapkan sebagai sifat kejadian axios itu sendiri, bukannya pengepala.

// Incorrect (Sets withCredentials as a request header)
const axiosAuth = axios.create({
  ...
  headers: {
    withCredentials: true,
  },
  ...
});

// Correct (Sets withCredentials as a property of the instance)
const axiosAuth = axios.create({
  ...
  withCredentials: true,
  ...
});

Penyelesaian

Dengan mengalihkan denganCredentials untuk menjadi harta daripada contoh axios, bukannya pengepala, penyemak imbas akan menghormati pengepala Set-Cookie dengan betul daripada asal silang respons dan simpan kuki secara setempat. Ini membolehkan aplikasi bahagian hadapan menghantar kuki ke API kemudiannya atas permintaan seterusnya untuk tujuan pengesahan.

Atas ialah kandungan terperinci Mengapakah Saya Tidak Boleh Menetapkan Kuki daripada Respons API Silang Asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!