React Native中Fetch/Axios HTTP请求在Android端无法正常工作

作为经常帮开发者排查这类问题的人，我可以很明确地说：绝大多数Android端的网络请求失败，根源都在基础配置或者环境适配问题上，先从这些地方入手准没错，再结合Fetch和Axios各自的特性去细化排查。

一、先搞定Android基础配置（90%的坑在这里） #

1. 网络权限缺失 #

打开android/app/src/main/AndroidManifest.xml，必须在<manifest>根标签内（不是<application>标签里）添加权限声明：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

很多新手容易漏加这个，直接导致App完全没有发起网络请求的权限。

2. 明文HTTP请求被拦截（Android 9+） #

如果你的服务器用的是HTTP（非HTTPS），Android Pie及以上系统默认会阻止明文网络请求，解决办法二选一：

• 快速临时方案：在AndroidManifest.xml的<application>标签里添加属性：

  android:usesCleartextTraffic="true"
  

• 规范生产方案：创建网络安全配置文件android/app/src/main/res/xml/network_security_config.xml，内容如下：

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
      <domain-config cleartextTrafficPermitted="true">
          <domain includeSubdomains="true">你的服务器域名/IP</domain>
      </domain-config>
  </network-security-config>
  

  然后在<application>标签里关联这个配置：

  android:networkSecurityConfig="@xml/network_security_config"
  

3. 模拟器/真机的网络地址适配 #

• 本地开发服务器：Android模拟器不能用localhost或127.0.0.1，必须换成10.0.2.2（这是模拟器映射到宿主机的专用IP）；真机测试时，确保手机和电脑在同一WiFi下，用电脑的局域网IP（比如192.168.1.100）代替localhost。
• 远程服务器：先在手机/模拟器的浏览器里打开服务器地址，确认能正常访问，排除网络本身的问题。

二、Fetch请求的常见问题与修复 #

假设你的Fetch代码是类似这样的：

fetch('http://你的服务器地址/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Fetch Error:', err));

1. 未处理HTTP错误状态码 #

Fetch的坑点：只有网络层面的失败（比如断网）才会进入catch，像404、500这类HTTP错误状态码不会触发catch，必须手动判断：

fetch('http://你的服务器地址/api/data')
  .then(res => {
    if (!res.ok) {
      throw new Error(`HTTP错误！状态码：${res.status}`);
    }
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('Fetch Error:', err));

2. Headers或请求体配置错误 #

如果服务器要求特定的Content-Type或者需要携带Token，一定要明确配置：

fetch('http://你的服务器地址/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + 你的Token
  },
  body: JSON.stringify({ key: 'value' })
})

3. Cookie会话丢失 #

Fetch默认不携带Cookie，如果需要保持登录会话，要添加credentials选项：

fetch('http://你的服务器地址/api/data', {
  credentials: 'include' // 同域请求也可以用'same-origin'
})

三、Axios请求的常见问题与修复 #

假设你的Axios代码是类似这样的：

import axios from 'axios';

axios.get('http://你的服务器地址/api/data')
  .then(res => console.log(res.data))
  .catch(err => console.error('Axios Error:', err));

1. 全局配置错误 #

如果设置了全局baseURL或headers，一定要确认地址和参数正确：

axios.defaults.baseURL = 'http://正确的服务器地址';
axios.defaults.headers.common['Authorization'] = 'Bearer ' + 你的Token;

2. 超时时间过短 #

Axios默认超时是1000ms，服务器响应慢的话会直接失败，建议延长超时时间：

axios.get('http://你的服务器地址/api/data', {
  timeout: 5000 // 设置为5秒超时
})

3. 错误处理不全面 #

Axios的错误对象包含多层信息，要精准排查：

axios.get('http://你的服务器地址/api/data')
  .then(res => console.log(res.data))
  .catch(err => {
    if (err.response) {
      // 服务器返回了错误状态码
      console.log('状态码:', err.response.status);
      console.log('错误数据:', err.response.data);
    } else if (err.request) {
      // 请求发出去但没收到响应（比如断网）
      console.log('请求异常:', err.request);
    } else {
      // 请求配置出错（比如URL写错）
      console.log('配置错误:', err.message);
    }
  });

4. 自签名HTTPS证书问题（仅开发环境） #

如果用了自签名的HTTPS证书，Android会拒绝信任，开发环境可以临时关闭SSL验证（生产环境绝对不能这么做！）：

import axios from 'axios';
import { Platform } from 'react-native';

if (Platform.OS === 'android') {
  axios.defaults.httpsAgent = new (require('https').Agent)({ rejectUnauthorized: false });
}

四、最后一步：日志精准排查 #

如果以上都试过还是不行，打开React Native调试菜单（Ctrl+M/Cmd+M），选择"Debug JS Remotely"，在Chrome控制台的Network标签里查看请求细节：

• 请求是不是根本没发出去？
• 有没有返回错误状态码？
• 请求头、请求体是否和预期一致？

另外，也可以在Android Studio的Logcat里过滤"Network"相关日志，能看到系统层面的错误提示（比如权限不足、明文请求被拦截）。

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