部署后Cookie已设置但浏览器Storage中不可见的问题求助

我用expressjs + mysql + reactjs搭建了一个博客平台，本地环境正常，但部署后遇到以下问题：

• 登录接口返回的响应头中能看到Set-Cookie字段，但浏览器的Storage/Cookies面板里找不到对应的Cookie
• 已在Chrome和Firefox中测试，问题一致
• 前端axios已配置withCredentials = true

后端登录逻辑代码：

const { password: hashedPassword, ...otherUserData } = data[0];

const token = jwt.sign({ id: data[0].id }, process.env.JWT_KEY, { expiresIn: "180d" });

res.cookie("access_token", token, {
    maxAge: 180 * 24 * 60 * 60 * 1000,
    httpOnly: true,
    sameSite: "none",
    secure: true,
}).status(200).json(otherUserData);

排查及修复方案 #

1. 确认CORS配置正确性 #

跨域场景下，后端CORS必须明确配置：

• 不能使用origin: "*"，需指定前端部署的具体域名
• 开启credentials: true，允许跨域携带凭证

示例Express CORS配置：

const cors = require('cors');
app.use(cors({
  origin: 'https://code-daily.vercel.app', // 替换为你的前端域名
  credentials: true
}));

2. 校验Cookie属性 #

• secure属性：仅当部署环境为HTTPS时，secure: true才会生效。如果是HTTP环境，需改为false（正式环境务必改回true）
• sameSite属性：sameSite: "none"必须和secure: true配合使用，否则浏览器会拒绝存储该Cookie
• domain属性：若前后端域名不同，需显式设置domain为后端的根域名，确保Cookie能被正确关联

3. 检查浏览器隐私设置 #

部分浏览器默认开启"阻止第三方Cookie"，会导致跨域Cookie无法保存。可以临时关闭该设置验证，或者在项目文档中说明权限要求

内容的提问来源于stack exchange，提问作者Ayush Sachan