為什麼我的 FastAPI Cookie 無法到達我的 React 前端？

FastAPI Cookie 問題與React 前端

問題

FastAPI 不會將cookie 返回到React 前端，儘管執行了POST 請求並觀察到使用DevTools 的回應標頭中的cookie Chrome。

解決方案

要解決該問題，請按照以下步驟操作：

1. 驗證Axios 請求：

   驗證Axios 請求：

2. 確保Axios POST 請求成功執行且不回傳任何錯誤。此外，檢查回應是否包含 'status': 'success' 以及 200 狀態代碼。

   在 Axios 請求中設定憑證：

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

   由於 React 前端和 FastAPI 後端使用不同的連接埠，因此會發出跨域請求。若要啟用cookie 傳輸，請在Axios 請求中將withCredentials 屬性設定為
true
3. ：

   在FastAPI 中間件中允許憑證：中間件中允許憑證：中間件中允許憑證：中間件中允許憑證：中間件中允許憑證：中間件中允許憑證：中間件中允許憑證：中間件中允許憑證🎜>

   對於跨域請求，在FastAPI中間件中明確允許憑證使用 COSMiddleware，設定allow_credentials=True。這會將Access-Control-Allow-Credentials 回應標頭設定為
true
4. .

   指定允許的來源：

5. 指定使用ORIGINS 允許的來源，不包括* 通配符。這可確保僅允許特定網域傳送 Cookie。

   設定 Cookie HTTPOnly：

6. 在 FastAPI 程式碼中，將 httponly 參數設定為設定 cookie 時為 true。這可以防止 JavaScript 存取 cookie，從而增強安全性。

   設定 CORS 中間件：

7. 將 CORSMiddleware 新增至 FastAPI 應用程式並將其設定為允許 React前端使用的來源、允許憑證並允許所有方法和

   檢查瀏覽器設定（僅適用於本地主機測試）：

如果透過本機存取React 前端，請確保Axios POST 請求使用URL中使用“localhost”而不是“127.0.0.1”，因為它們被認為是不同的

透過實施這些步驟，FastAPI 將正確地將cookie 返回到React 前端，從而實現前端和後端之間安全且經過身份驗證的通訊。

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