為什麼我的 FastAPI 後端無法將 Cookie 傳送到我的 React 前端？

FastAPI：無法將 Cookie 回傳至 React 前端

當 FastAPI 無法將 Cookie 回傳至 React前端時，就會出現此問題

代碼：

下面的Python 程式碼段示範了用於設定cookie 的FastAPI 程式碼：

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)):
    # code to authenticate and generate access token
    
    # set cookie
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    
    return {"status": "success"}

在React 前端，您'正在使用axios傳送要求：

await axios.post(login_url, formdata)

故障排除：

1. 確認Cookie 建立：

   • 確保axios POST請求成功並返回'status': 'success'響應，狀態代碼為 200。

2. 在Axios 請求中啟用憑證：

   • 在Axios 請求中設定withCredentials: true 以允許接收憑證包括cookies。

3. 設定CORS：

   • 因為您對FastAPI（後端）和React 使用不同的連接埠（ frontend） ，在FastAPI 中啟用CORS 以指定允許的來源。設定allow_credentials=True 以允許傳送和接收憑證。

4. 指定允許的來源：

   • 在您的 CORS 配置中，指定 React允許的來源

更正的Axios 請求：

await axios.post(login_url, formdata, {withCredentials: true})

其他注意事項：

• 同上網域： 確保後端和前端使用相同的網域名稱。使用 localhost 和 127.0.0.1 作為不同的網域將阻止 cookie 共用。
• 明確 Cookie 設定： FastAPI response.set_cookie() 函數在回應上明確設定 cookie。
• 憑證包括：當憑證符合下列條件時，瀏覽器會在跨網域要求中包含憑證： 'include' 在fetch() 中指定，或在Axios 中withCredentials: true 。

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