Mengapa Bahagian Belakang FastAPI Saya Tidak Boleh Menghantar Kuki ke Bahagian Depan Reaksi Saya?

FastAPI: Tidak Dapat Mengembalikan Kuki ke Bahagian Depan React

Isu timbul apabila FastAPI gagal mengembalikan kuki ke bahagian hadapan React semasa komunikasi.

Kod:

The Coretan Python di bawah menunjukkan kod FastAPI untuk menetapkan kuki:

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)):
    # code to authenticate and generate access token
    
    # set cookie
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    
    return {"status": "success"}

Dalam bahagian hadapan React, anda menggunakan Axios untuk menghantar permintaan:

await axios.post(login_url, formdata)

Penyelesaian masalah:

1. Sahkan Kuki Penciptaan:

   • Pastikan permintaan Axios POST berjaya dan mengembalikan 'status': respons 'berjaya' dengan kod status 200.

2. Dayakan Bukti Kelayakan dalam Axios Permintaan:

   • Tetapkan dengan Kredensial: benar dalam permintaan Axios anda untuk membenarkan penerimaan bukti kelayakan, termasuk kuki.

3. Konfigurasikan CORS :

   • Memandangkan anda menggunakan yang berbeza port untuk FastAPI (backend) dan React (frontend), dayakan CORS dalam FastAPI untuk menentukan asal yang dibenarkan. Tetapkan allow_credentials=True untuk membenarkan penghantaran dan penerimaan bukti kelayakan.

4. Nyatakan Asal Dibenarkan:

   • Dalam konfigurasi CORS anda, nyatakan asal yang dibenarkan untuk React anda bahagian hadapan.

Permintaan Axios Dibetulkan:

await axios.post(login_url, formdata, {withCredentials: true})

Pertimbangan Tambahan:

• Domain yang Sama: Pastikan kedua-dua backend dan frontend menggunakan domain yang sama. Menggunakan localhost dan 127.0.0.1 sebagai domain yang berbeza akan menghalang perkongsian kuki.
• Tetapan Kuki Eksplisit: Fungsi FastAPI response.set_cookie() secara eksplisit menetapkan kuki pada respons.
• Butiliti Termasuk: Pelayar menyertakan bukti kelayakan dalam permintaan silang asal apabila bukti kelayakan: 'include' dinyatakan dalam fetch() atau withCredentials: true dalam Axios.

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