Express中Cookie随响应头发送存储后刷新丢失问题求助

• 已查阅相关资料仍无法解决：响应头存在Set-Cookie但带有警告，因使用HTTP协议将secure设为false，尝试过SameSite=lax|strict均无效
• Cookie在Chrome开发者工具的Application标签中可见，但刷新页面或修改URL后立即消失
• 前端地址：http://localhost:3000/，后端请求地址为http://127.0.0.1:3000/api/v1/users/login，怀疑前后端域名不一致但不知道如何验证
• 环境：Chrome 127版本，macOS系统

Set-Cookie警告截图：

前端请求代码 #

const signInHandler = async function(e){
try {
    await axios({
        method: "POST",
        url: "http://127.0.0.1:3000/api/v1/users/login",
        data:{
            name: userName.value,
            password: password.value
        },
        withCredentials: true
    });
    
    // window.setTimeout(() => {
    //     location.assign("/");
    // },500);

} catch (error) {
    console.log(error);
    
}
}

后端Cookie设置代码 #

const sendToken = function(user, res){
const token = createJWTToken(user);

const cookieOptions = {
    expires: new Date(Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000),
    httpOnly: true,
    secure: false,
    sameSite: "None"
}

res.cookie("jwt", token, cookieOptions);  
}

CORS配置代码 #

const corsOptions = {
origin: true,
credentials: true
}

app.use(cors(corsOptions));

1. 核心问题：前后端源不一致 #

浏览器同源策略中，localhost和127.0.0.1属于不同的源（域名维度不匹配），导致设置的Cookie无法跨源共享，刷新页面后浏览器不会携带该Cookie，最终Cookie消失。

2. 具体修改步骤 #

（1）统一前后端请求地址

将前端请求的URL从http://127.0.0.1:3000/api/v1/users/login改为http://localhost:3000/api/v1/users/login，确保前后端使用相同域名：

// 修改后的前端请求代码
const signInHandler = async function(e){
try {
    await axios({
        method: "POST",
        url: "http://localhost:3000/api/v1/users/login", // 统一为localhost
        data:{
            name: userName.value,
            password: password.value
        },
        withCredentials: true
    });
    // 恢复跳转逻辑（如果需要）
    // window.setTimeout(() => {
    //     location.assign("/");
    // },500);

} catch (error) {
    console.log(error);
}
}

（2）调整Cookie的SameSite配置

SameSite=None要求必须配合secure=true（仅HTTPS可用），而你使用HTTP协议，所以该配置无效。将sameSite改为"Lax"即可：

// 修改后的后端Cookie设置代码
const sendToken = function(user, res){
const token = createJWTToken(user);

const cookieOptions = {
    expires: new Date(Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000),
    httpOnly: true,
    secure: false, // HTTP下保持false
    sameSite: "Lax" // 替换为Lax
}

res.cookie("jwt", token, cookieOptions);  
}

（3）优化CORS配置（可选但更严谨）

将CORS的origin从true改为具体的前端地址http://localhost:3000，避免不必要的跨源风险：

// 修改后的CORS配置
const corsOptions = {
origin: "http://localhost:3000", // 指定具体前端地址
credentials: true
}

app.use(cors(corsOptions));

3. 验证方法 #

修改完成后：

1. 重新启动前后端服务
2. 登录后查看Application标签的Cookie，确认Domain为localhost
3. 刷新页面或跳转URL，检查Cookie是否仍存在

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