Chrome DevTools Application标签无Cookie但Network可见的排查求助

核心问题定位 #

你的代码存在两个关键问题，导致浏览器无法存储Cookie：

1. Axios请求参数顺序错误 #

handleClick和handleClickGet中，withCredentials: true的位置完全错误：

• Axios post方法的参数顺序是：axios.post(url, 请求体数据, 配置项)
• 你把配置项当成请求体传入第二个参数，导致跨域携带凭证的规则未生效，浏览器直接拒绝保存Cookie。

2. Cookie配置缺失必要属性 #

设置Cookie时未指定path和sameSite，浏览器会因安全策略默认拒绝存储这类不完整的Cookie。

修复步骤 #

第一步：修正Axios请求配置 #

将withCredentials移到正确的配置参数位置：

const handleClick=()=>{
  // post请求无数据时，第二个参数传空对象，配置项放第三个位置
  axios.post("http://localhost:5000/feedback", {}, {withCredentials: true})
  .then((res)=>console.log(res))
  .catch((error)=>console.log(error))
}

const handleClickGet=()=>{
  // get请求的配置项直接放第二个参数
  axios.get("http://localhost:5000/feedback", {withCredentials: true})
  .then((res)=>console.log(res))
  .catch((error)=>console.log(error))
}

第二步：优化服务端Cookie配置 #

在设置Cookie时补充必要属性，确保浏览器能正常存储：

// 修改feedback路由中的res.cookie配置
router.get("/",(req,res)=>{
    res.cookie("jwt","Login Data",{
        httpOnly: false,
        path: '/', // 确保全站路径可访问该Cookie
        sameSite: 'lax', // 适配跨域场景（同域名不同端口属于跨域）
        maxAge: 24 * 60 * 60 * 1000 // 可选：设置1天有效期
    })
    res.json({data:"Fetched Data from Server"})
})

router.post("/",(req,res)=>{
    res.cookie("jwt","SampleData",{
        httpOnly: false,
        path: '/',
        sameSite: 'lax',
        maxAge: 24 * 60 * 60 * 1000
    })
    res.send("Feedback Router post")
})

第三步：清理重复CORS配置 #

服务端同时使用了cors中间件和自定义header设置，存在重复规则，保留cors中间件即可，删除后续的自定义header中间件：

// 仅保留这一行CORS配置，删除后面的res.header自定义中间件
app.use(cors({ 
  origin: 'http://localhost:5173', 
  credentials: true, 
  exposedHeaders: ['Set-Cookie', 'Date', 'ETag'] 
}))

验证方法 #

1. 重启前后端服务
2. 点击按钮发送请求后，查看Chrome开发者工具：
   • Network标签确认Set-Cookie响应头正常返回
   • Application标签→Storage→Cookies→http://localhost:5000 即可看到jwtCookie

修改完成后，Cookie就能正常存储，可基于此搭建JWT登录系统。

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