React Native中Fetch请求的Authorization Header失效问题

我之前也碰到过类似的情况，React Native的fetch在跨源场景下（哪怕是同一局域网内的设备），头信息的处理确实和web端有不少差异。结合你的代码和抓包结果，给你几个可行的排查方向和解决方案：

• 调整credentials参数
  你当前设置的credentials: 'same-origin'在React Native中，只有当请求的源和应用的源完全一致时才会携带凭证/头信息，但手机访问电脑的本地API属于跨源请求，这个配置不会生效。建议改成credentials: 'include'，强制携带所有头信息和凭证：

  fetch('http://192.168.1.132:8000/test', { 
    method: 'GET', 
    headers: { 
      'Authorization': 'Bearer 4uFPmkP5326DXcRuHDKjRRrmhdeIBJ'
    }, 
    credentials: 'include' 
  }) 
  .then((response) => response.json()) 
  .then((responseJson) => { console.log('RESPONSE: ' + JSON.stringify(responseJson)) })
  

• 补充必要的请求头
  有时候React Native的fetch会因为缺少标准头而过滤自定义头，你可以显式添加Accept和Content-Type，确保请求格式符合API预期：

  headers: {
    'Authorization': 'Bearer 4uFPmkP5326DXcRuHDKjRRrmhdeIBJ',
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
  

• 检查API的CORS配置
  即使是同一局域网，手机和电脑属于不同源，API服务器必须允许携带Authorization头。确保你的API配置了：

  • Access-Control-Allow-Origin（可以设为*用于测试环境）
  • Access-Control-Allow-Headers: Authorization
    如果缺少这些配置，React Native的网络层会在预请求（OPTIONS）后自动丢弃自定义头。

• 尝试用axios替代fetch
  如果fetch的问题始终无法解决，换用axios库是个不错的选择，它在React Native中的头信息处理更稳定。先安装依赖：

  npm install axios
  

  然后使用以下代码发送请求：

  import axios from 'axios';
  
  axios.get('http://192.168.1.132:8000/test', {
    headers: {
      'Authorization': 'Bearer 4uFPmkP5326DXcRuHDKjRRrmhdeIBJ'
    },
    withCredentials: true
  })
  .then(response => {
    console.log('RESPONSE: ' + JSON.stringify(response.data));
  })
  .catch(error => {
    console.error(error);
  });
  

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