浏览器Application标签未保存登录Cookie，受保护路由鉴权失败

核心原因 #

你的前端运行在HTTP协议（http://127.0.0.1:3000），但后端返回的Set-Cookie里添加了Secure属性——这个属性要求Cookie只能在HTTPS环境下被浏览器保存，因此HTTP环境下浏览器直接拒绝存储该Cookie，后续请求自然无法携带token，最终导致鉴权失败。

看响应头里的Set-Cookie字段：

set-cookie: token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; Path=/; Expires=Mon, 16 Jan 2023 20:26:45 GMT; HttpOnly; Secure; SameSite=None

其中的Secure就是关键限制项。

已确认无问题的配置 #

• 前端Axios已正确设置withCredentials: true，跨域请求携带凭证的配置有效。
• 后端CORS开启了credentials: true，且origin指定了前端地址，跨域规则配置正确。
• 后端已挂载cookie-parser中间件，Cookie解析功能正常。

解决办法 #

根据你的环境需求选择任意一种方案：

1. 开发环境将前端切换为HTTPS #

通过工具让前端运行在HTTPS环境下（比如React项目可以添加HTTPS=true参数启动，或用nginx反向代理），匹配Secure属性的要求后，浏览器即可正常保存Cookie。

2. 后端根据环境动态控制Secure属性 #

在设置Cookie的代码中，判断当前运行环境，仅在生产环境开启Secure属性：

export const sendToken=(res, user, message, statusCode)=>{
    const token = user.getJwtToken();
    const isProduction = process.env.NODE_ENV === 'production';
    const options = {
        httpOnly:true,
        sameSite: isProduction ? "None" : "Lax",
        expires:new Date(Date.now() + 15*60*60*1000),
        secure: isProduction, // 仅生产环境启用Secure
    }
    res.status(statusCode).cookie("token", token, options).json({
        success:true,
        message,
        user
    })
}

同时需要在环境变量中添加NODE_ENV，开发环境设为development，生产环境设为production。

3. 临时移除Secure属性（仅开发测试用） #

直接删除secure:true配置，开发环境下浏览器就能正常保存Cookie，但上线前必须恢复该属性，避免生产环境出现安全风险。

验证步骤 #

修改配置后重新发起登录请求：

1. 查看响应头的Set-Cookie字段，确认Secure属性符合当前环境要求。
2. 打开浏览器Application面板，检查Cookie列表中是否存在token。
3. 调用受保护路由，验证后端能正常获取req.cookies.token，鉴权通过。

内容的提问来源于stack exchange，提问作者Deepanshu Gupta