FastAPI 不会将 cookie 返回到 React 前端,尽管执行了 POST 请求并观察到使用 DevTools 的响应标头中的 cookie Chrome。
要解决该问题,请按照以下步骤操作:
验证 Axios 请求:
确保 Axios POST 请求成功执行并且不返回任何错误。此外,检查响应是否包含 'status': 'success' 以及 200 状态代码。
在 Axios 请求中设置凭据:
由于 React 前端和 FastAPI 后端使用不同的端口,因此会发出跨域请求。要启用 cookie 传输,请在 Axios 请求中将 withCredentials 属性设置为 true:
await axios.post(url, data, {withCredentials: true}))
在 FastAPI 中间件中允许凭证:
对于跨域请求,在 FastAPI 中间件中明确允许凭证使用 COSMiddleware,设置allow_credentials=True。这会将 Access-Control-Allow-Credentials 响应标头设置为 true.
指定允许的来源:
指定使用 ORIGINS 允许的来源,不包括 * 通配符。这可确保仅允许特定域发送 Cookie。
设置 Cookie HTTPOnly:
在 FastAPI 代码中,将 httponly 参数设置为设置 cookie 时为 true。这可以防止 JavaScript 访问 cookie,从而增强安全性。
配置 CORS 中间件:
将 CORSMiddleware 添加到 FastAPI 应用程序并将其配置为允许 React 前端使用的来源、允许凭据并允许所有方法和
检查浏览器设置(仅适用于本地主机测试):
如果通过本地主机访问 React 前端,请确保 Axios POST 请求使用URL 中使用“localhost”而不是“127.0.0.1”,因为它们被认为是不同的
通过实施这些步骤,FastAPI 将正确地将 cookie 返回到 React 前端,从而实现前端和后端之间安全且经过身份验证的通信。
以上是为什么我的 FastAPI Cookie 无法到达我的 React 前端?的详细内容。更多信息请关注PHP中文网其他相关文章!