React Native调用API无法获取登录用户数据问题排查

React Native 运行在原生JS环境，没有浏览器内置的Cookie自动存储、自动携带机制。
Postman、VS Code Thunder Client这类测试工具自带Cookie管理器，会自动保存接口返回的Set-Cookie内容，后续请求自动附带到请求头，所以测试时接口正常。但默认配置的axios在RN环境下，既不会自动保存登录接口返回Cookie中的JWT，请求/api/auth/me这类需要鉴权的接口时也不会自动携带令牌，后端拿不到合法JWT就无法识别用户身份，导致拉取用户数据失败。

两种实现方案按需选择即可，第一种适配RN生态稳定性更高，优先推荐：

方案1：本地存储JWT + axios拦截器自动携带（通用方案） #

放弃依赖浏览器式Cookie自动机制，手动持久化存储JWT，通过请求拦截器统一给接口加鉴权头：

1. 安装RN本地持久化存储依赖：

   npx expo install @react-native-async-storage/async-storage
   

2. 登录接口请求成功后，把返回的JWT存到本地：

   import AsyncStorage from '@react-native-async-storage/async-storage';
   // 登录逻辑拿到token后执行存储
   await AsyncStorage.setItem('userJWT', 接口返回的JWT值);
   

3. 封装统一的axios请求实例，配置请求拦截器自动附加令牌：

   import axios from 'axios';
   import AsyncStorage from '@react-native-async-storage/async-storage';
   
   const API_URL = '你的后端服务地址';
   const request = axios.create({
     baseURL: API_URL,
   });
   
   // 请求拦截器：每次发请求前从本地读取token，塞到请求鉴权头里
   request.interceptors.request.use(async (config) => {
     const token = await AsyncStorage.getItem('userJWT');
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
     return config;
   });
   
   export default request;
   

4. 把Redux代码里直接用axios发的请求，替换成用这个封装好的request实例发送即可，不需要每次手动传token。

方案2：保留Cookie鉴权模式，适配RN Cookie支持 #

如果后端逻辑已经固定为Cookie鉴权、不想调整鉴权逻辑，可以引入RN生态的Cookie管理库做适配：

1. 安装Cookie管理依赖：

   npx expo install @react-native-cookies/cookies
   

2. 初始化axios实例时开启跨域携带Cookie配置：

   const request = axios.create({
     baseURL: API_URL,
     withCredentials: true,
   });
   

   注意：使用该方案需要调整后端CORS配置，不能将允许源设置为通配符*，必须明确配置Expo调试服务的地址（本地调试一般为http://localhost:8081，真机调试要配对应局域网IP），同时开启credentials: true配置，否则跨域场景下Cookie会被网络层拦截。

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