Mengapa Bahagian Belakang FastAPI Saya Tidak Menghantar Kuki ke Bahagian Depan React Saya?

FastAPI Tidak Dapat Menghantar Kuki ke React Frontend

Ikhtisar

FastAPI ialah rangka kerja Python yang popular untuk mencipta API. Walau bagaimanapun, sesetengah pengguna telah melaporkan isu dengan FastAPI tidak mengembalikan kuki ke aplikasi bahagian hadapan React.

Masalah

Mengapa FastAPI tidak mengembalikan kuki ke apl bahagian hadapan React?

Contoh Kod

Berikut ialah coretan kod yang menggambarkan isu:

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)) -> dict:
    # Database operations omitted for brevity
    access_token = create_access_token(data={"sub": user.mobile_number})
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    return {"status": "success"}

Apabila menghantar permintaan log masuk daripada Swagger UI, kuki muncul dalam pengepala respons. Walau bagaimanapun, daripada apl React, tiada kuki dikembalikan.

Penyelesaian

Terdapat dua langkah untuk menyelesaikan isu ini:

1. Set Kuki dengan Betul:

   • Pastikan tiada ralat dalam permintaan FastAPI dan respons berjaya diterima.
   • Tetapkan kuki dengan betul menggunakan response.set_cookie(...).

2. Konfigurasikan CORS dan Bukti Kelayakan:

   • Benarkan permintaan CORS dengan menetapkan asal dan allow_credentials=True dalam CORSMiddleware.
   • Dalam apl React, tetapkan denganCredentials: true dalam permintaan Axios untuk menghantar kuki.

Penjelasan

1. Kuki Tetapan:

   • Sahkan bahawa kuki ditetapkan dengan betul dalam respons FastAPI. Pastikan kunci, nilai, http sahaja dan parameter lain yang berkaitan yang betul ditetapkan.

2. Perkongsian Sumber Silang Asal (CORS):

   • Memandangkan React dan FastAPI berada pada port yang berbeza, permintaan CORS sedang dibuat.
   • Untuk membenarkan kuki dengan CORS, pelayan mesti membenarkan asal-usul tertentu melalui pengepala respons Access-Control-Allow-Origin.
   • Dalam FastAPI, gunakan CORSiddleware dengan allow_credentials=True.

3. Kelayakan dalam Permintaan:

   • Dalam React, tetapkan denganCredentials: true dalam permintaan Axios.
   • Ini memberitahu penyemak imbas untuk menghantar kuki dalam permintaan seterusnya kepada pelayan FastAPI.

Penting Nota

Nyatakan secara eksplisit asal usul yang dibenarkan untuk menghalang akses tanpa kebenaran kepada kuki. Secara lalai, hanya jenis komunikasi tertentu dibenarkan dalam permintaan CORS tanpa bukti kelayakan, tidak termasuk kuki.

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