Rumah > hujung hadapan web > tutorial js > Mengapa Kuki FastAPI Saya Tidak Mencapai Bahagian Hadapan Reaksi Saya?

Mengapa Kuki FastAPI Saya Tidak Mencapai Bahagian Hadapan Reaksi Saya?

Susan Sarandon
Lepaskan: 2024-12-12 21:14:10
asal
633 orang telah melayarinya

Why Aren't My FastAPI Cookies Reaching My React Frontend?

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}))
    Salin selepas log masuk
  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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan