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

FastAPI 無法將Cookie 傳送至React 前端

概述

FastAPI 是一個用於建立建立程式的熱門框架。然而，一些用戶報告了 FastAPI 不向 React 前端應用程式傳回 cookie 的問題。

問題

為什麼 FastAPI 不向 React 前端應用程式傳回 cookie？

程式碼範例

這是說明問題的程式碼片段：

@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"}

傳送時來自 Swagger UI 的登入要求，cookie 出現在回應標頭中。但是，從 React 應用程式中，不會返回 cookie。

解決方案

解決此問題有兩個步驟：

1. 設定正確設定Cookie：

   • 確保Cookie 中沒有錯誤FastAPI 請求並收到成功回應。
   • 使用 response.set_cookie(...) 正確設定 cookie。

2. 設定 CORS 並憑證：

   • 透過設定來源和允許 CORS 請求CORSMiddle>
在 React 應用程式中，在 Axios 請求中設定 withCredentials: true 來傳送 cookie。

說明

1. 餅乾設定：

   • 餅乾設定：

2. 餅乾設定：

   是否正確設定了cookie。確保設定了正確的 key、value、httponly 和其他相關參數。
   • 跨域資源共享(CORS)：

3. 由於React 和FastAPI 位於不同的端口，CORS 請求正在連接埠，CORS 請求正在被處理製作。 要允許使用 CORS 的 cookie，伺服器必須透過 Access-Control-Allow-Origin 回應標頭允許特定來源。

   在 FastAPI 中，使用 CORSMiddleware 並允許_credentials=True。
憑證要求：

在 React 中，在 Axios 請求中設定 withCredentials: true。

這會通知瀏覽器在後續請求中向 FastAPI 伺服器發送 cookie。 重要注意明確指定允許的來源，以防止未經授權的存取 cookie。預設情況下，在沒有憑證的 CORS 請求中僅允許某些通訊類型，不包括 cookie。

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