开发过程中在本地主机上设置cookie的问题

Question

我的服务器上有 nodejs express 应用程序作为后端，以及 vue 应用程序作为前端。我使用会话 cookie 进行身份验证，但我无法让它们在我的本地开发计算机上工作。 Cookie 在响应中发送，但浏览器不保存。我知道问题是请求来源必须与主机相同，并且我已阅读与该问题相关的所有文章/问题，但我无法解决它。

在服务器上，一切都通过 https 上的 nginx 进行代理。 Cookie 设置在那里，一切正常，因为它们位于同一主机上。

我的本地 vite 开发服务器正在 https 上运行，端口 5173。

我使用axios进行api调用并且我已经设置了

axios.defaults.withCredentials = true;

Cookie 属性是

sameSite:'none', 
secure:true,
httpOnly:true,

快递：

app.use(
  cors({
    origin: ['https://localhost:5173', 'https://my.site.com'],
    credentials: true,
  })
); 

就像我之前说的，cookie 是在服务器的响应中发送的，只是不存储在浏览器上，因为在请求标头中：

host:my.site.com
origin:https://localhost:5173
referer:https://localhost:5173/

我该如何解决这个问题？

Answer 1

我按照评论中的解决方案https://stackoverflow.com/a/46412839/13781306。 当我设置时它部分起作用

sameSite:'none', 
secure:false,

Cookie 在请求中传递，但不存储在浏览器存储/cookie 中。这很好，解决了我的问题。

Answer 2

我可能会迟到，但这是我的解决方案：

问题

sameSite:'none',
secure:true,
httpOnly:true,

这基本上是要求浏览器仅为安全 http 源设置 cookie。也就是说，如果您的前端客户端仅使用

https

运行，那么您就可以设置 cookie。

解决方案

总的来说，您应该启动 JS 客户端的本地服务器并启用 HTTPS。

（Mac 的所有命令/示例）

1. 生成本地自签名证书

openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

2. 在您的

   package.json

中设置启动脚本

导出 HTTPS=true && SSL_CRT_FILE=cert.pem && SSL_KEY_FILE=key.pem && 启动服务器的命令

3. 使证书对您的浏览器有效/可识别。

• Firefox：https://unix.stackexchange.com/questions/644176/how-to-permanently-add-self-signed-certificate-in-firefox

• 铬：

  a. Click on the "Not secure" 

  b. Click on the certificate button. This should open a new window

  c. Click on localhost and export the localhost certificate(maybe to your desktop). This would create a *.cer file

  d. Double click on the file and add it to system key-chain.

  e. Open you system key-chain and look for 'localhost'

  f. Click on 'Trust' and choose 'Always trust' in all dropdowns.

  g. Re-start local server.

现在 chrome 会自动存储响应标头中的 cookie。