获取和会话和 CORS

Posted 2023-03-04

【中文标题】获取和会话和 CORS

【英文标题】：Fetch and sessions and CORS

【发布时间】：2019-01-29 08:13:01

【问题描述】：

我正在运行一个 React 前端和一个 Flask 后端。我什么都不懂。

让我们谈谈 CORS。 CORS 是跨域资源共享。那么，当我在同一主机上同时运行前端和后端时，为什么 Chrome 会抱怨 CORS？

所以我在我的 Flask 后端启用了 CORS，然后继续我的快乐之路。

我不傻，所以我想，如果用户不小心刷新或关闭页面，我该如何保留用户的数据？幸运的是，Flask 内置了会话 cookie。所以我继续在 session 中存储重要的东西，在 componentDidMount 中，我尝试获取一些重要的东西。但刷新后，Flask 忘记了会话，我的 fetch 没有返回有用的数据。

我试着查了一会儿，发现了一些有趣的东西，比如要获取的凭据参数。如果我写在credentials: "include"，根据docs：

始终发送用户凭据（cookie、基本 http 身份验证等），即使是跨域调用。

所以从表面上看，这应该可以解决我的问题并在一定程度上解决我的困惑，但是，当然，没有这样的运气：

对预检请求的响应未通过访问控制检查：响应中“Access-Control-Allow-Credentials”标头的值为“”，当请求的凭据模式为“包含”时，该值必须为“真” . Origin 'http://localhost:3000' 因此不允许访问。

请帮助我了解发生了什么，以及如何解决它。

我会继续研究。

【参考方案1】：

简而言之：

您的服务器应该说它支持凭据。 Flask 中的support_credentials=True 导致Access-Control-Allow-Credentials: true Header。 您的前端应在请求中包含凭据：credentials: "include" 您的服务器应返回非通配符 Access-Control-Allow-Origin 即 http://foo.example 而不是 *。

最好使用浏览器的开发工具排查问题。

看这里以获得更大的解释：https://***.com/a/7189502/803174

【参考方案2】：

所以我找到了一个解决方案，但我愿意接受一个清楚地解释发生了什么的答案。

我的解决方案是将supports_credentials=True 添加到我的 Flask 应用程序中，这样代码行如下所示：

CORS(app, supports_credentials=True)

然后我可以将credentials: 'include' 添加到我的获取请求中，cookie 似乎已成功存储。

【讨论】：

除非您的前端和后端共享相同的协议、主机和端口，否则请求将被 CORS 标记。

设置“supports_credentials=True”会导致您的 Flask 应用将“Access-Control-Allow-Credentials”响应标头的值设置为“true”，从而消除问题中引用的错误。如果“Access-Control-Allow-Credentials”响应标头的值不是“true”，则您的浏览器会阻止您的前端 javascript 代码发送您的请求。 （问题中引用的错误消息是针对 CORS preflight OPTIONS 请求，在尝试来自您的代码的请求之前，浏览器会自动发送该请求。如果 preflight 失败，您的浏览器会停在那里。）