首页 > web前端 > js教程 > 为什么我的 FastAPI Cookie 无法到达我的 React 前端?

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

Susan Sarandon
发布: 2024-12-12 21:14:10
原创
632 人浏览过

Why Aren't My FastAPI Cookies Reaching My React Frontend?

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板