Mengapa Backend FastAPI Saya Tidak Menghantar Kuki ke Frontend React Saya?

Mengapa FastAPI Tidak Mengembalikan Kuki ke Bahagian Hadapan React

Apabila cuba mendapatkan kuki daripada bahagian belakang FastAPI dalam bahagian hadapan React, anda mungkin mendapati bahawa anda tidak sebenarnya menerima kuki yang dijangkakan dalam respons. Beberapa faktor menyumbang kepada tingkah laku ini, seperti penciptaan kuki yang betul, konfigurasi penghantaran bukti kelayakan dan persediaan CORS (Perkongsian Sumber Silang Asal) yang betul.

Menetapkan Kuki dengan Betul

Secara lalai, FastAPI melakukan tidak mengembalikan kuki secara automatik dalam respons. Untuk menetapkan kuki, anda mesti memanggil fungsi set_cookie() objek respons secara eksplisit dan nyatakan kunci, nilai dan sebarang pilihan tambahan (seperti max_age atau tamat tempoh). Pastikan tiada ralat semasa permintaan Axios POST dan anda menerima respons yang berjaya dengan kod status 200.

Transmisi Kredensial

Untuk bahagian hadapan React anda menerima kuki, anda perlu mendayakan penghantaran kelayakan dalam permintaan Axios anda. Dengan menetapkan sifat withCredentials kepada benar, anda membenarkan permintaan anda untuk menghantar dan menerima bukti kelayakan, seperti kuki dan pengepala kebenaran. Sifat ini harus disertakan dalam setiap permintaan yang anda harapkan untuk menerima bukti kelayakan daripada pelayan.

Selain itu, untuk permintaan CORS (apabila bahagian hadapan dan bahagian belakang anda menggunakan domain atau port yang berbeza), konfigurasi CORS mesti membenarkan penghantaran bukti kelayakan secara eksplisit . Ini boleh dicapai dengan menetapkan pilihan allow_credentials kepada Benar dalam CORSMiddleware.

Konfigurasi CORS

Tetapan CORS memainkan peranan penting dalam membenarkan permintaan silang asal dan membolehkan penghantaran kuki antara bahagian hadapan dan bahagian belakang . Pastikan aplikasi FastAPI anda mempunyai perisian tengah CORS yang dikonfigurasikan dan senarai allow_origins termasuk asal bagi bahagian hadapan React anda.

Konfigurasi Axios yang Betul

Permintaan Axios harus termasuk pilihan withCredentials yang ditetapkan kepada benar:
tunggu axios.post(url, data, { withCredentials: true })

Sebagai alternatif, jika menggunakan API Ambil:
fetch('https://example.com', { kelayakan: 'include' })

Dengan mengikuti langkah ini, anda boleh berjaya menetapkan dan mendapatkan kuki antara bahagian belakang FastAPI dan bahagian hadapan React anda, membenarkan pengendalian pengguna yang disahkan dan kawalan akses.

Atas ialah kandungan terperinci Mengapa Backend FastAPI Saya Tidak Menghantar Kuki ke Frontend React Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!