為什麼我的 FastAPI Cookie 沒有出現在我的 React 前端中？

FastAPI：在 React 前端處理 Cookie

概述

FastAPI 為後端開發啟用 Cookie 處理。但是，在 React 前端中傳送和接收 cookie 可能需要特定配置才能確保正常功能。

為什麼Cookie 沒有返回React 前端

如果您的FastAPI 後端沒有將cookie 返回到您的React 應用程序，有幾個因素可能會導致此問題：

1.無效的Axios請求：

• 透過將 withCredentials 屬性設為 true，確保您的 Axios 要求正確傳送憑證。
• 驗證 Axios 請求 URL 是否與您的網域符合FastAPI 後端。使用 localhost 和 127.0.0.1 作為不同的網域可能會破壞 cookie 建立。

2. CORS 限制：

• 由於跨域請求，您需要在 FastAPI 應用程式中明確設定 CORS 設定。
• 使用 CORSMiddleware 和allow_credentials= 指定允許的來源True 則啟用跨網域 cookie用法。

3. FastAPI 中的 Cookie 設定：

• 確保使用 response.set_cookie() 方法在 FastAPI 路由中正確設定 Cookie。
• 驗證 httponly 參數是否設定為True 可防止客戶端存取 cookie。

4. SameSite 屬性：

• cookie 的 SameSite 屬性會影響其在不同領域的可用性。
• 將其設定為 SameSite=Lax 或 SameSite=Strict 以控制 cookie 的可存取性和防止跨站攻擊。

FastAPI 範例Cookie 設定：

from fastapi import FastAPI, Response

app = FastAPI()

@app.get('/')
def main(response: Response):
    response.set_cookie(
        key='token',
        value='some-token-value', 
        httponly=True,
        samesite='Lax'  # or 'Strict'
    ) 
    return {'status': 'success'}

有憑證的 Axios請求範例：

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

重要說明：

• 請記住，使用通配符(*) 表示Access-Control-Allow-Origin可能會限制通訊類型並阻止發送cookie 和授權標頭。
• 確保前端域明確包含在允許的來源中，並且將allow_credentials=True 設定為正確的cookie 處理。

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