為什麼我的 FastAPI 後端不會向我的 React 前端發送 Cookie？

為什麼FastAPI 不將Cookie 返回React 前端

當嘗試從React 前端中的FastAPI 後端檢索Cookie 時，您可能會發現您沒有實際上在響應中收到了預期的cookie。有幾個因素會導致此行為，例如正確的 cookie 建立、憑證傳輸的配置以及正確的 CORS（跨來源資源共用）設定。

正確設定 Cookie

預設情況下，FastAPI 不會自動在回應中傳回 cookie。要設定 cookie，您必須明確呼叫回應物件的 set_cookie() 函數並指定鍵、值和任何其他選項（例如 max_age 或 expires）。確保 Axios POST 請求期間沒有錯誤，並且您收到狀態代碼為 200 的成功回應。

憑證傳輸

為了讓您的 React 前端接收 cookie，您需要在您的 Axios 請求中啟用憑證傳輸。透過將 withCredentials 屬性設為 true，您可以允許請求傳送和接收憑證，例如 cookie 和授權標頭。此屬性應包含在您希望從伺服器接收憑證的每個請求中。

此外，對於 CORS 請求（當您的前端和後端使用不同的域或連接埠時），CORS 設定必須明確允許憑證傳輸。這可以透過在CORSMiddleware中將allow_credentials選項設定為True來實現。

CORS配置

CORS設定在允許跨域請求以及啟用前端和後端之間的cookie傳輸方面發揮著至關重要的作用。確保您的 FastAPI 應用程式配置了 CORS 中間件，並且 allowed_origins 清單包含 React 前端的來源。

正確的Axios 設定

Axios 請求應包含設定為true 的withCredentials 選項：
等待axios.post(url, data, { withCredentials: true })

或者，如果使用Fetch API：
fetch('https://example.com', { credential: 'include' })

透過執行以下步驟，您可以在FastAPI 後端和React 前端之間成功設定和檢索cookie，從而允許經過身份驗證的使用者處理和存取控制。

以上是為什麼我的 FastAPI 後端不會向我的 React 前端發送 Cookie？的詳細內容。更多資訊請關注PHP中文網其他相關文章！