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

为什么 FastAPI 不将 Cookie 返回到 React 前端

当尝试从 React 前端中的 FastAPI 后端检索 Cookie 时，您可能会发现您没有实际上在响应中收到了预期的 cookie。有几个因素会导致此行为，例如正确的 cookie 创建、凭证传输的配置以及正确的 CORS（跨源资源共享）设置。

正确设置 Cookie

默认情况下，FastAPI 不会不会自动在响应中返回 cookie。要设置 cookie，您必须显式调用响应对象的 set_cookie() 函数并指定键、值和任何其他选项（例如 max_age 或 expires）。确保 Axios POST 请求期间没有错误，并且您收到状态代码为 200 的成功响应。

凭证传输

为了让您的 React 前端接收 cookie，您需要在您的 Axios 请求中启用凭证传输。通过将 withCredentials 属性设置为 true，您可以允许请求发送和接收凭据，例如 cookie 和授权标头。此属性应包含在您希望从服务器接收凭据的每个请求中。

此外，对于 CORS 请求（当您的前端和后端使用不同的域或端口时），CORS 配置必须显式允许凭据传输。这可以通过在CORSMiddleware中将allow_credentials选项设置为True来实现。

CORS配置

CORS设置在允许跨域请求以及启用前端和后端之间的cookie传输方面发挥着至关重要的作用。确保您的 FastAPI 应用程序配置了 CORS 中间件，并且 allowed_origins 列表包含 React 前端的来源。

正确的 Axios 配置

Axios 请求应包含设置为 true 的 withCredentials 选项：
等待 axios.post(url, data, { withCredentials: true })

或者，如果使用 Fetch API：
fetch('https://example.com', { credential: 'include' })

通过执行以下步骤，您可以可以在 FastAPI 后端和 React 前端之间成功设置和检索 cookie，从而允许经过身份验证的用户处理和访问控制。

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