即使设置了 sameSite:'none' 和 secure: true 对于 MERN 堆栈 Web 应用程序，Cookie 也不会保存在 chrome 中

Posted 2023-02-22

【中文标题】即使设置了 sameSite:\'none\' 和 secure: true 对于 MERN 堆栈 Web 应用程序，Cookie 也不会保存在 chrome 中

【英文标题】：Cookie is not get saved in chrome even after setting sameSite:'none' and secure: true for a MERN stack web app即使设置了 sameSite:'none' 和 secure: true 对于 MERN 堆栈 Web 应用程序，Cookie 也不会保存在 chrome 中

【发布时间】：2020-12-03 11:04:08

【问题描述】：

在 chrome 中进行最新更新后，浏览器没有保存我的服务器 cookie。以前，即使显示警告，它也可以正常工作。但现在不是。

由于我的 react 应用程序托管在 netlify 上，而我的服务器在 AWS 上运行，因此它是跨域的。因此，我在 express-session 中使用 sameSite=None secure 选项更改了我的 cookie 设置，如下所示。

app.use(session(
secret: 'my secret',
name: 'my-react-app',
resave: false,
saveUninitialized: true,
cookie: 
  secure: true,
  sameSite: 'none',
  maxAge: 24 * 60 * 60 * 1000,
  httpOnly: true

));

设置secure: true 后，在firefox 中也不起作用。该网站通过 https 提供服务。我已经尝试了这些参数的几乎所有组合。我错过了什么吗？任何帮助将不胜感激。

【参考方案1】：

我终于找到了解决办法。

实际上，这与我花了很多时间的 express-session 设置无关。这背后的主要原因是错误配置的反向代理。就我而言，反向代理和应用程序服务器之间的连接不是 https。因此，不会应用 cookie 中的安全标志，这反过来会导致将 sameSite 选项设置为默认的 'lax' 值。而且，这就是我的 cookie 在跨域请求中被拒绝的原因。

为了解决这个问题，我必须在代理头中设置X-Forwarded-Proto。

打开反向代理配置文件

sudo nano /etc/nginx/conf.d/sysmon.conf

在我的例子中，并添加以下行。

proxy_set_header X-Forwarded-Proto $scheme;

这将通过 https 转发请求。

而且你还需要在express中设置“信任代理”。

var app = express()
app.set('trust proxy', 1) // trust first proxy