使用js-cookie从React应用向Node.js发送Cookie问题排查

以下是针对你遇到的问题的具体排查步骤：

• 检查Cookie的SameSite与Secure属性
  js-cookie默认的SameSite值是Lax，跨域请求（不同端口属于跨域）下这类Cookie不会被浏览器发送。需要显式配置：

  Cookies.set('userEmail', '目标邮箱', { 
    sameSite: 'None', 
    secure: true, 
    path: '/' 
  })
  

  注意：本地HTTP环境下，Chrome等浏览器会拦截SameSite=None且secure: true的Cookie，可临时通过Chrome启动参数--disable-web-security --user-data-dir=临时目录关闭安全限制测试，生产环境必须使用HTTPS。

• 确认Cookie的Path与Domain配置
  Path默认是当前页面路径，建议设为path: '/'确保整个域名下的接口都能访问该Cookie；Domain可设置为domain: 'localhost'，适配本地跨端口场景。

• 后端必须配置允许跨域携带凭证
  Node.js后端（以Express为例）需正确配置CORS，origin不能设为*，必须指定前端地址，同时开启credentials：

  const cors = require('cors');
  app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
  }));
  

• 前端请求必须开启携带凭证
  不管用axios还是fetch，都要明确设置携带Cookie：

  • axios示例：axios.post('/api/your-endpoint', data, { withCredentials: true })
  • fetch示例：fetch('/api/your-endpoint', { method: 'POST', credentials: 'include', body: data })

• 用浏览器开发者工具验证

  1. 打开F12的Application面板，查看Cookie列表，确认目标Cookie的SameSite、Secure、Path等属性符合配置要求；
  2. 切换到Network面板，查看请求的Request Headers，确认是否存在Cookie字段，若不存在则说明前面的配置仍有问题。

• 排查浏览器安全策略限制
  若使用Chrome，本地HTTP环境下SameSite=None的Cookie会被默认拦截，可通过chrome://flags/#same-site-by-default-cookies将该选项设为Disabled临时绕过，或改用HTTPS本地服务。

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