ReactJS中调用cookies.get()获取值返回undefined问题排查

核心错误点 #

你写的cookie设置代码存在2个不符合浏览器cookie规范的配置：

• secure: true配置错误：该属性要求cookie仅在HTTPS协议下存储、传输，localhost默认属于HTTP环境，开启该属性后浏览器会直接拒绝存储你设置的cookie
• domain参数填写错误：cookie的domain配置仅支持填写纯域名，不能携带协议头、端口号，http://localhost:3001属于非法格式，浏览器不会将设置的cookie匹配到当前站点

排查思路 #

• 第一步打开浏览器开发者工具→Application面板→存储→Cookie，查看当前站点下是否存在token、user字段，如果不存在说明set阶段配置错误
• 核对set配置的secure属性：本地开发HTTP环境必须设为false，建议做环境适配，仅生产HTTPS环境开启该属性
• 核对domain配置：删除协议、端口，仅保留纯域名，localhost场景可以直接省略该参数，浏览器会默认匹配当前站点
• 确认读写场景一致性：调用cookies.get()的页面域名、端口必须和执行cookies.set()的页面完全一致，跨端口、跨子域名默认无法读取cookie
• 如果cookie为后端设置，确认是否带HttpOnly属性，该属性会禁止前端JS读取cookie

解决方案 #

修改后的配置代码如下：

// 根据环境自动适配secure属性
const isProduction = process.env.NODE_ENV === 'production'

cookies.set('token', payload.token, {
  maxAge: 3600 * 1000,
  secure: isProduction,
  sameSite: 'lax' // 可选配置，避免跨站拦截问题
})

cookies.set("user", JSON.stringify(payload.user), {
  maxAge: 3600 * 1000,
  secure: isProduction,
  sameSite: 'lax'
})

console.log("Login success token",  cookies.get('token'))

额外注意事项 #

调整配置后先清理浏览器当前站点的旧Cookie，避免无效缓存干扰测试；如果需要同域名下多端口共享cookie，可以显式增加配置domain: 'localhost'。

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