为什么我的 FastAPI Cookie 无法到达我的 React 前端？

FastAPI Cookie 问题与 React 前端

问题

FastAPI 不会将 cookie 返回到 React 前端，尽管执行了 POST 请求并观察到使用 DevTools 的响应标头中的 cookie Chrome。

解决方案

要解决该问题，请按照以下步骤操作：

1. 验证 Axios 请求：

   确保 Axios POST 请求成功执行并且不返回任何错误。此外，检查响应是否包含 'status': 'success' 以及 200 状态代码。

2. 在 Axios 请求中设置凭据：

   由于 React 前端和 FastAPI 后端使用不同的端口，因此会发出跨域请求。要启用 cookie 传输，请在 Axios 请求中将 withCredentials 属性设置为 true：

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

3. 在 FastAPI 中间件中允许凭证：

   对于跨域请求，在 FastAPI 中间件中明确允许凭证使用 COSMiddleware，设置allow_credentials=True。这会将 Access-Control-Allow-Credentials 响应标头设置为 true.

4. 指定允许的来源：

   指定使用 ORIGINS 允许的来源，不包括 * 通配符。这可确保仅允许特定域发送 Cookie。

5. 设置 Cookie HTTPOnly：

   在 FastAPI 代码中，将 httponly 参数设置为设置 cookie 时为 true。这可以防止 JavaScript 访问 cookie，从而增强安全性。

6. 配置 CORS 中间件：

   将 CORSMiddleware 添加到 FastAPI 应用程序并将其配置为允许 React 前端使用的来源、允许凭据并允许所有方法和

7. 检查浏览器设置（仅适用于本地主机测试）：

   如果通过本地主机访问 React 前端，请确保 Axios POST 请求使用URL 中使用“localhost”而不是“127.0.0.1”，因为它们被认为是不同的

通过实施这些步骤，FastAPI 将正确地将 cookie 返回到 React 前端，从而实现前端和后端之间安全且经过身份验证的通信。

以上是为什么我的 FastAPI Cookie 无法到达我的 React 前端？的详细内容。更多信息请关注PHP中文网其他相关文章！