登录后无法从Cookies中获取Token的技术问题咨询

用户登录场景下，前端向后端Next.js发送登录请求，后端通过res.setHeader设置Cookie后返回响应，此时前端无法通过js-cookie获取Cookie中的Token，但在浏览器Application/Cookies面板中能看到该Token。

后端代码 #

try {
  const email = req.body.email
  const password = req.body.password
  
  const user = await User.findOne({ email })

  if(!user) {
    throw new Error(`User doesn't exist!`)
  }

  // 验证密码
  const validPassword = await bcrypt.compare(password, user.password)
  if(!validPassword) {
    throw new Error('Invalid password!')
  }

  const signData = {
    userId: user._id,
    name: user.name,
    email: user.email,
    admin: user.isAdmin
  }
 
  const token = jwt.sign( signData, process.env.JWT_SECRET, {
      expiresIn: '4h',
    });

  res.setHeader('Set-Cookie', `token=${token}; HttpOnly; Max-Age=${60 * 60 * 24 * 1}; Path=/login`);

  return res.status(201).json({
    success: true,
    message: 'Welcome back',
  });
    
} catch (error) {
   console.log(error)
   res.status(500).send({
    success: false,
    message: error.message
   })
}

前端代码 #

import Cookies from 'js-cookie';

try {
  const res = await axios.post('/api/user/login', data, config)
  console.log(res.data)
  
  toast.success(res.data.message)

  const token = Cookies.get('token');
  console.log('token', token);  // 输出 undefined

} catch (error) {
  console.log(error)
  toast.error(error.response.data.message)
}

问题原因及解决方法 #

1. HttpOnly 属性限制 #

你设置的Cookie带有HttpOnly属性，这是安全机制，会禁止前端JavaScript（包括js-cookie库）读取该Cookie，只能由浏览器自动在请求中携带到后端。

• 如果确实需要前端获取Token：可以去掉HttpOnly属性，但这会增加XSS攻击风险，不推荐。更安全的做法是后端在响应体中同时返回Token，前端将其存在localStorage或sessionStorage中。
• 如果不需要前端读取Token，仅需浏览器自动携带：保留HttpOnly即可，后续前端请求后端时，浏览器会自动带上这个Cookie，无需手动处理。

2. Path 路径设置错误 #

你设置的Cookie路径是Path=/login，这意味着该Cookie仅在/login路径下有效，其他路径无法访问。应该将路径改为Path=/，这样全站所有路径都能访问到这个Cookie：

res.setHeader('Set-Cookie', `token=${token}; HttpOnly; Max-Age=${60 * 60 * 24 * 1}; Path=/`);

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