React Native/Expo使用js-cookie获取Cookie失败 XSRF-TOKEN为undefined如何解决

• 依赖库不兼容：js-cookie 是基于浏览器document.cookie API开发的工具库，React Native环境没有内置浏览器的document对象，无法通过该库读取/写入Cookie，因此调用Cookies.get("XSRF-TOKEN")必然返回undefined。
• 请求配置错误：当前fetch的credentials属性设为了same-origin，如果React Native请求地址和后端服务地址跨域（域名、端口、协议任一不同），该配置会禁止携带和接收跨域Cookie，导致后端返回的XSRF-TOKEN Cookie无法被本地存储。
• 原生环境Cookie持久化缺失：React Native自带的fetch API默认不会自动持久化跨请求的Cookie，即使后端返回了Set-Cookie响应头，也不会自动存储供后续请求使用。
• 后端CORS配置不完整：如果后端没有正确配置跨域凭证相关的响应头，即使前端配置正确，Cookie也会被原生环境拦截。

• 1. 替换Cookie管理方案
     卸载js-cookie，改用React Native专属的Cookie管理库@react-native-cookies/cookies，安装后可以通过以下API获取Cookie：

  import CookieManager from '@react-native-cookies/cookies';
  
  // 发起请求前获取指定Cookie
  const cookies = await CookieManager.get('你的后端服务根地址');
  const xsrfToken = cookies['XSRF-TOKEN']?.value;
  

  也可以直接改用axios作为请求库，配置withCredentials: true后会自动处理Cookie的存储和携带，无需手动读取。
• 2. 修正fetch请求配置
     将fetch的credentials属性改为include，确保跨域场景下可以接收和携带Cookie：

  const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    credentials: 'include', // 替换原来的same-origin
    headers: {
      'Content-Type': 'application/json',
      "CSRF-Token": xsrfToken // 用CookieManager拿到的token
    },
    // 其余配置保持不变
  })
  

• 3. 补全后端Express配置
     首先配置CORS中间件允许凭证，且不能使用通配符*作为允许的源，要指定你React Native的请求源地址：

  const cors = require('cors');
  app.use(cors({
    origin: '你的React Native请求源地址（开发环境通常为http://localhost:8081）',
    credentials: true
  }));
  
  // 同时调整Cookie配置，跨域场景下需要设置SameSite和Secure属性
  app.use("*", (req, res, next)=>{
    res.cookie("XSRF-TOKEN", req.csrfToken(), {
      sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
      secure: process.env.NODE_ENV === 'production', // 生产环境用HTTPS时设为true
      httpOnly: false // 必须设为false，否则前端JS无法读取该Cookie
    });
    next();
  })
  

• 4. 可选简化方案：如果不想手动处理Cookie逻辑，可以直接改用axios作为请求库，配置全局withCredentials: true后，会自动存储后端返回的Cookie，且后续请求自动携带，只需要在请求拦截器里读取Cookie塞入CSRF头即可。

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