Mengapa Kuki FastAPI Saya Tidak Mencapai Bahagian Hadapan Reaksi Saya?

Isu Kuki FastAPI dengan React Frontend

Masalah

FastAPI tidak mengembalikan kuki ke bahagian hadapan React, walaupun melaksanakan permintaan POST dan memerhati kuki dalam pengepala respons menggunakan DevTools hidup Chrome.

Penyelesaian

Untuk menyelesaikan isu, ikut langkah berikut:

1. Sahkan Permintaan Axios:

   Pastikan permintaan Axios POST dijalankan dengan jayanya dan tidak mengembalikan sebarang ralat. Selain itu, pastikan respons termasuk 'status': 'berjaya' dengan 200 kod status.

2. Tetapkan Bukti Kelayakan dalam Permintaan Axios:

   Memandangkan bahagian hadapan React dan bahagian belakang FastAPI menggunakan port yang berbeza, permintaan silang asal sedang dibuat. Untuk mendayakan pemindahan kuki, tetapkan sifat withCredentials kepada true dalam permintaan Axios:

   await axios.post(url, data, {withCredentials: true}))

3. Benarkan Bukti Kelayakan dalam FastAPI Middleware:

   Untuk permintaan silang asal, benarkan bukti kelayakan secara jelas dalam FastAPI middleware menggunakan CORSMiddleware, tetapan allow_credentials=True. Ini menetapkan pengepala respons Access-Control-Allow-Credentials kepada true.

4. Nyatakan Asal Dibenarkan:

   Nyatakan asal yang dibenarkan menggunakan ORIGINS, tidak termasuk * kad bebas. Ini memastikan bahawa hanya domain tertentu dibenarkan menghantar kuki.

5. Tetapkan Kuki HTTPSahaja:

   Dalam kod FastAPI, tetapkan parameter httponly kepada Benar apabila menetapkan kuki. Ini menghalang JavaScript daripada mengakses kuki, meningkatkan keselamatan.

6. Konfigurasikan CORS Middleware:

   Tambahkan CORSiddleware pada apl FastAPI dan konfigurasikannya ke benarkan asal yang digunakan oleh bahagian hadapan React, benarkan kelayakan, dan benarkan semua kaedah dan pengepala.

7. Semak Tetapan Penyemak Imbas (Untuk Pengujian Localhost Sahaja):

   Jika mengakses bahagian hadapan React melalui localhost, pastikan permintaan Axios POST menggunakan 'localhost' dan bukannya '127.0.0.1' dalam URL, kerana ini dianggap berbeza domain.

Dengan melaksanakan langkah-langkah ini, FastAPI akan mengembalikan kuki ke bahagian hadapan React dengan betul, membolehkan komunikasi yang selamat dan disahkan antara bahagian hadapan dan bahagian belakang.

Atas ialah kandungan terperinci Mengapa Kuki FastAPI Saya Tidak Mencapai Bahagian Hadapan Reaksi Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!