Axios请求仅在React Native Debugger开启时生效的403问题

你遇到的核心问题是：仅在调试环境下请求正常，真机/关闭调试器时返回403，且已确认token有效。以下是针对性的排查方向和解决方法：

1. 排查token的赋值时机与axios实例创建逻辑 #

你的axios实例初始化时直接硬编码了Authorization头，如果token是从本地存储（如AsyncStorage）异步读取的，创建实例时token可能还未获取到，导致请求头携带无效值。调试时RN Debugger的环境可能存在缓存或代码执行顺序差异，刚好能拿到有效token。

解决方法：改用请求拦截器动态添加Authorization头：

import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const http = axios.create({
  baseURL: 'https://api.lanchecard.com.br/api',
  headers: {
    Accept: 'application/json',
  },
});

// 动态在请求前添加有效token
http.interceptors.request.use(async (config) => {
  const token = await AsyncStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => Promise.reject(error));

export default http;

2. 检查请求User-Agent差异 #

部分API会通过User-Agent验证请求来源，调试时RN Debugger使用Chrome的UA，而真机/关闭调试器时使用React Native默认UA，可能被API的反拦截机制拒绝返回403。

解决方法：固定设置符合API要求的User-Agent：

const http = axios.create({
  baseURL: 'https://api.lanchecard.com.br/api',
  headers: {
    Accept: 'application/json',
    'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36',
  },
});

3. 验证移动端网络安全配置 #

真机的网络安全策略可能导致请求被拦截或篡改，间接引发403：

• iOS：临时在Info.plist中添加ATS例外测试（上线时需替换为具体域名配置）：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

• Android：配置res/xml/network_security_config.xml允许目标域名：

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
      <domain-config cleartextTrafficPermitted="false">
          <domain includeSubdomains="true">lanchecard.com.br</domain>
      </domain-config>
  </network-security-config>
  

  并在AndroidManifest.xml的application标签中引用：

  android:networkSecurityConfig="@xml/network_security_config"
  

4. 调试真机请求头 #

在真机环境下，通过请求拦截器打印请求头，确认Authorization是否正确携带：

http.interceptors.request.use(async (config) => {
  const token = await AsyncStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  // 真机通过adb logcat或Xcode控制台查看日志
  console.log('Request Headers:', JSON.stringify(config.headers));
  return config;
});

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