Mengapa Kuki FastAPI Saya Tidak Muncul di Bahagian Hadapan Reaksi Saya?

FastAPI: Mengendalikan Kuki dalam React Frontend

Ikhtisar

FastAPI mendayakan pengendalian kuki untuk pembangunan backend. Walau bagaimanapun, menghantar dan menerima kuki dalam bahagian hadapan React mungkin memerlukan konfigurasi khusus untuk memastikan kefungsian yang betul.

Mengapa Kuki Tidak Dikembalikan ke Bahagian Depan React

Jika bahagian belakang FastAPI anda tidak mengembalikan kuki ke apl React anda , beberapa faktor mungkin menyumbang kepada isu ini:

1. Permintaan Axios Tidak Sah:

• Pastikan permintaan Axios anda menghantar bukti kelayakan dengan betul dengan menetapkan sifat withCredentials kepada benar.
• Sahkan bahawa URL permintaan Axios sepadan dengan domain anda Bahagian belakang FastAPI. Menggunakan localhost dan 127.0.0.1 sebagai domain yang berbeza boleh mengganggu penciptaan kuki.

2. Sekatan CORS:

• Disebabkan permintaan silang asal, anda perlu mengkonfigurasi tetapan CORS secara eksplisit dalam aplikasi FastAPI anda.
• Nyatakan asal yang dibenarkan menggunakan CORSMiddleware dengan allow_credentials= Benar untuk mendayakan kuki silang asal penggunaan.

3. Tetapan Kuki dalam FastAPI:

• Pastikan anda menetapkan kuki dengan betul dalam laluan FastAPI anda menggunakan kaedah response.set_cookie().
• Sahkan bahawa parameter httponly ditetapkan kepada Benar untuk menghalang akses pihak pelanggan kepada kuki.

4. Atribut SameSite:

• Atribut SameSite bagi kuki boleh memberi kesan kepada ketersediaannya merentas domain yang berbeza.
• Tetapkannya kepada SameSite=Lax atau SameSite=Ketat untuk mengawal kebolehaksesan kuki dan mengelakkan serangan merentas tapak.

Contoh FastAPI Tetapan Kuki:

from fastapi import FastAPI, Response

app = FastAPI()

@app.get('/')
def main(response: Response):
    response.set_cookie(
        key='token',
        value='some-token-value', 
        httponly=True,
        samesite='Lax'  # or 'Strict'
    ) 
    return {'status': 'success'}

Contoh Permintaan Axios dengan Bukti Kelayakan:

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

Nota Penting:

• Ingat bahawa menggunakan kad bebas (*) untuk Access-Control-Allow-Origin mungkin hadkan jenis komunikasi dan halang kuki dan pengepala kebenaran daripada dihantar.
• Pastikan domain bahagian hadapan disertakan secara eksplisit dalam asal yang dibenarkan dan allow_credentials=True ditetapkan untuk pengendalian kuki yang betul.

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