为什么我的 FastAPI 后端不向我的 React 前端发送 Cookie？

FastAPI 无法将 Cookie 发送到 React 前端

概述

FastAPI 是一个用于创建 API 的流行 Python 框架。然而，一些用户报告了 FastAPI 不向 React 前端应用程序返回 cookie 的问题。

问题

为什么 FastAPI 不向 React 前端应用程序返回 cookie？

代码示例

这是说明问题的代码片段：

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)) -> dict:
    # Database operations omitted for brevity
    access_token = create_access_token(data={"sub": user.mobile_number})
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    return {"status": "success"}

发送时来自 Swagger UI 的登录请求，cookie 出现在响应标头中。但是，从 React 应用程序中，不会返回 cookie。

解决方案

解决此问题有两个步骤：

1. 设置正确设置 Cookie：

   • 确保 Cookie 中没有错误FastAPI 请求并收到成功响应。
   • 使用 response.set_cookie(...) 正确设置 cookie。

2. 配置 CORS 并凭证：

   • 通过设置来源和允许 CORS 请求CORSMiddleware 中的allow_credentials=True。
   • 在 React 应用中，在 Axios 请求中设置 withCredentials: true 来发送 cookie。

说明

1. 饼干设置：

   • 验证 FastAPI 响应中是否正确设置了 cookie。确保设置了正确的 key、value、httponly 和其他相关参数。

2. 跨域资源共享 (CORS)：

   • 由于 React 和 FastAPI 位于不同的端口，CORS 请求正在被处理制作。
   • 要允许使用 CORS 的 cookie，服务器必须通过 Access-Control-Allow-Origin 响应标头允许特定来源。
   • 在 FastAPI 中，使用 CORSMiddleware 并允许_credentials=True。

3. 凭证请求：

   • 在 React 中，在 Axios 请求中设置 withCredentials: true。
   • 这会通知浏览器在后续请求中向 FastAPI 服务器发送 cookie。

重要注意

明确指定允许的来源，以防止未经授权的访问 cookie。默认情况下，在没有凭据的 CORS 请求中仅允许某些通信类型，不包括 cookie。

以上是为什么我的 FastAPI 后端不向我的 React 前端发送 Cookie？的详细内容。更多信息请关注PHP中文网其他相关文章！