将本地主机连接到远程开发服务器(CORS、同一站点、安全和其他令人头疼的问题)

Connecting localhost to a remote dev server (CORS, same-site, secure and other headaches)

我目前正在做一个 React 项目。该项目的开发服务器 (Bottle/Python) 是远程托管的,我的 React 开发服务器是本地主机。应用程序的部分身份验证过程涉及在登录时设置 cookie,但由于未设置 cookie 的同一站点和安全规则,这意味着我的开发前端无法访问它需要的任何数据。

我自己和服务器工程师已将 SameSite=None 添加到 cookie 中以确保安全,但由于我的本地主机不是 https,cookie 仍未正确存储(我收到错误消息“this Set-Cookie" 被阻止,因为它具有 "安全" 属性,但不是通过安全连接接收的")。

部署应用程序时没有问题,因为一切都在同一个域中,但现在我们陷入困境 - 我们已经尝试解决这个问题几个小时但似乎无法解决.

我的问题是 - 如果您需要访问非本地开发服务器,但实际上不能在本地计算机上拥有您自己的服务器版本 运行,那么最佳开发实践是什么?

我:

  1. 需要以某种方式让我的本地主机 https 吗?
  2. 需要将开发服务器域设为 https 吗?
  3. 需要在本地安装服务器,因为没有办法做到这一点?

很抱歉,如果这是一个菜鸟问题,能得到一些建议会很棒。 非常感谢。

简短的回答是:

  1. 没有
  2. 没有

您可以在 http://localhost:port 上 运行 您的应用程序。假设您的开发服务器响应 headers Set-Cookie 带有安全标志的 cookie,您的开发服务器 URL 必须是 https 才能让浏览器接受该 cookie。

我有这个设置,而且效果很好。

关于 CORS(如问题标题中所述):您必须将服务器配置为接受凭据并配置允许的来源。执行 XHR 请求时的客户端应用程序必须具有 withCredentials:true。查看我的 post 中的第 2 点和第 3 点了解详情。

另请注意,如果您使用 Chrome,您可以出于开发目的绕过 SameSite=None 的要求,并通过禁用标志“没有 SameSite 的 Cookie 必须是安全的”来确保安全,还详细here