Node后端发送的Cookie在Network可见但Application面板不显示，原因及解决？

核心原因排查 #

从你提供的代码来看，有两个关键问题导致Cookie未被浏览器存储：

1. 前端Fetch请求未携带凭据配置 #

后端已开启credentials: true的CORS配置，但前端发起POST请求时，未在fetch中添加credentials: 'include'选项。跨域场景下，浏览器只有收到明确的凭据携带指令，才会接收并存储服务器发送的Cookie。

2. secure: true与本地HTTP环境冲突 #

你设置了secure: true，该参数要求Cookie仅能在HTTPS协议下存储，但前端运行在http://localhost:3000（HTTP环境），浏览器会直接拒绝保存此Cookie，即便Network面板能看到Set-Cookie响应头。

具体修复步骤 #

步骤1：修改前端Fetch请求，添加凭据配置 #

在fetch的配置对象中加入credentials: 'include'：

const res = await fetch(`${PROXY_URL}/api/auth/login`, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    credentials: 'include', // 新增该行
    body: JSON.stringify(formData),
});

步骤2：按环境调整Cookie的secure配置 #

本地开发时将secure设为false，生产环境（HTTPS）再启用true，可通过环境变量区分：

res.cookie("jwt", token, {
    httpOnly: false,
    secure: process.env.NODE_ENV === 'production', // 仅生产环境启用secure
    sameSite: 'none'
})

注意：若后端也运行在HTTP的localhost环境，secure: true必然导致Cookie无法存储，必须改为false。

步骤3：适配SameSite配置 #

sameSite: 'none'需搭配secure: true使用，本地HTTP环境下可调整为'lax'避免浏览器限制：

res.cookie("jwt", token, {
    httpOnly: false,
    secure: process.env.NODE_ENV === 'production',
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax'
})

验证修复 #

修改完成后重新登录：

• 检查Application面板的Cookies目录下是否出现jwtCookie
• 查看document.cookie是否能输出该Cookie值

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