Mengapa Bahagian Depan React Saya Tidak Menerima Kuki daripada Bahagian Belakang FastAPI Saya?

Kuki FastAPI Tidak Diterima oleh React Frontend: Resolution

Apabila menggunakan FastAPI sebagai backend dan React sebagai frontend yang disampaikan melalui permintaan AJAX, kuki ditetapkan oleh FastAPI mungkin gagal diterima oleh React. Tingkah laku tidak konsisten ini boleh dikaitkan dengan nombor port yang berbeza yang digunakan oleh kedua-dua aplikasi, yang mencipta senario permintaan silang asal.

Untuk menangani isu ini, beberapa langkah diperlukan:

1. Tetapkan Kuki dengan Betul dalam FastAPI:
   Pastikan kuki dibuat dan ditetapkan dalam FastAPI tanpa kesilapan. Sahkan bahawa respons termasuk 'status': 'berjaya' dengan kod status 200.

2. Dayakan Penerimaan Kuki dalam React:
   Konfigurasikan permintaan Axios dalam React anda apl untuk menerima kuki dengan menetapkan sifat withCredentials kepada benar. Ini diperlukan untuk permintaan silang asal untuk memasukkan bukti kelayakan seperti kuki.

   Sebagai contoh, dalam Axios:
   tunggu axios.post(url, data, {withCredentials: true}))

   Dalam Fetch API:
   fetch('https://example.com', { kelayakan: 'include' });

3. Nyatakan Asal Dibenarkan dalam FastAPI:
   Disebabkan sifat silang asal permintaan, anda mesti menyatakan secara eksplisit asal yang dibenarkan untuk mengakses API anda. Ini termasuk domain dan port bahagian hadapan React anda.
4. Benarkan Bukti Kelayakan dalam CORSMiddleware:
   Dalam aplikasi FastAPI anda, pastikan bahawa CORSMiddleware dikonfigurasikan dengan allow_credentials ditetapkan kepada Benar. Ini menetapkan pengepala Access-Control-Allow-Credentials kepada benar, membenarkan bukti kelayakan disertakan dalam respons silang asal.

Dengan mengikut langkah ini, FastAPI seharusnya berjaya mengembalikan kuki ke bahagian hadapan React anda. Ingat untuk menyemak dengan teliti sama ada kuki ditetapkan dengan betul, tanpa ralat dikembalikan dalam permintaan Axios POST.

Atas ialah kandungan terperinci Mengapa Bahagian Depan React Saya Tidak Menerima Kuki daripada Bahagian Belakang FastAPI Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!