即使在设置 sameSite:'none' 和 secure: true 之后,Cookie 也不会保存在 chrome 中(对于 MERN 堆栈 Web 应用程序)
Cookie is not get saved in chrome even after setting sameSite:'none' and secure: true for a MERN stack web app
在 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 提供服务。我已经尝试了几乎所有与这些参数的组合。我错过了什么吗?任何帮助将不胜感激。
我终于找到了解决方案。
其实和express-session设置没有太大关系,我花了很多时间。这背后的主要原因是错误配置的反向代理。在我的例子中,反向代理和应用程序服务器之间的连接不是 https。因此,未应用 cookie 中的安全标志,这反过来导致将 sameSite 选项设置为默认 'lax' 值。而且,这就是为什么我的 cookie 在 cross-origin 请求中被拒绝的原因。
要解决这个问题,我必须在代理 header 中设置 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
在 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 提供服务。我已经尝试了几乎所有与这些参数的组合。我错过了什么吗?任何帮助将不胜感激。
我终于找到了解决方案。
其实和express-session设置没有太大关系,我花了很多时间。这背后的主要原因是错误配置的反向代理。在我的例子中,反向代理和应用程序服务器之间的连接不是 https。因此,未应用 cookie 中的安全标志,这反过来导致将 sameSite 选项设置为默认 'lax' 值。而且,这就是为什么我的 cookie 在 cross-origin 请求中被拒绝的原因。
要解决这个问题,我必须在代理 header 中设置 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