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