為什麼我的 React 前端沒有從 FastAPI 後端接收 Cookie？

React 前端未收到FastAPI Cookie：解決方法

當使用FastAPI 作為後端並使用React 作為前端透過AJAX 請求進行通訊時，cookie由FastAPI設定的React可能無法接收。這種不一致的行為可以歸因於兩個應用程式使用的不同連接埠號，從而創建了跨來源請求場景。

要解決此問題，需要執行幾個步驟：

1. 在FastAPI 中正確設定Cookie：
   確保在FastAPI 中建立和設定Cookie時沒有錯誤。驗證回應是否包含 'status': 'success' 以及 200 狀態代碼。

2. 在 React 中啟用 Cookie 接受：
   在 React 中設定 Axios 請求應用程式透過將 withCredentials 屬性設為 true 來接收 cookie。這對於跨來源請求包含像 cookie 這樣的憑證是必要的。

   例如，在Axios 中：
   await axios.post(url, data, {withCredentials: true}))

   在Fetch API 中：
   fetch('https: //example.com', {憑證: 'include' });

3. 在 FastAPI 中指定允許的來源：
   由於請求的跨來源性質，您必須明確指定允許存取您的 API 的來源。這包括 React 前端的域和連接埠。
4. 允許 CORSMiddleware 中的憑證：
   在 FastAPI 應用程式中，確保將 CORSMiddleware 設定為allow_credentials 設定為 True。這會將 Access-Control-Allow-Credentials 標頭設為 true，允許在跨來源回應中包含憑證。

透過執行這些步驟，FastAPI 應該會成功將 cookie 返回到您的 React 前端。請記得徹底檢查 cookie 設定是否正確，Axios POST 請求中沒有回傳錯誤。

以上是為什麼我的 React 前端沒有從 FastAPI 後端接收 Cookie？的詳細內容。更多資訊請關注PHP中文網其他相關文章！