为什么我的 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中文网其他相关文章！