React Native Expo安卓模拟器Fetch发起HTTP请求报错

核心报错原因 #

浏览器可正常访问接口，但Expo安卓模拟器请求失败，基本由以下三类问题导致：

• 安卓9（API 28）及以上版本默认拦截所有明文HTTP请求，仅信任HTTPS请求，Expo默认构建配置未放开该限制
• 调用本地运行的后端服务时，错误使用localhost/127.0.0.1作为请求地址，该地址在安卓模拟器内指向模拟器自身，而非开发宿主机
• 模拟器网络配置异常、请求头缺失、代理工具拦截导致请求失败

分步修复方案 #

1. 放开明文HTTP请求权限 #

打开项目根目录下的app.json配置文件，在expo.android节点下添加usesCleartextTraffic: true配置，允许应用发起明文HTTP请求：

{
  "expo": {
    // 其他已有配置保持不变
    "android": {
      "usesCleartextTraffic": true
    }
  }
}

注意：修改配置后必须完全终止Expo开发服务，重新执行expo start启动并重新加载安卓应用，配置才会生效。

如果是脱离Expo托管的原生React Native项目，需要修改android/app/src/main/AndroidManifest.xml文件，在<application>标签上添加属性：

<application
  // 其他已有属性保持不变
  android:usesCleartextTraffic="true"
>

2. 修正本地服务请求地址 #

如果接口运行在你当前使用的开发电脑上，不要使用localhost/127.0.0.1，根据模拟器类型替换为对应宿主机映射地址：

• 官方安卓原生模拟器：使用10.0.2.2访问宿主机本地服务
• Genymotion模拟器：使用10.0.3.2访问宿主机本地服务

正确的fetch调用示例：

// 错误写法：地址指向模拟器自身，无法访问宿主机服务
// const res = await fetch('http://localhost:8080/api/user')
// 正确写法（官方安卓模拟器）
const res = await fetch('http://10.0.2.2:8080/api/user')
const data = await res.json()

3. 网络与请求配置排查 #

• 打开模拟器自带的浏览器，直接访问目标API地址，确认模拟器本身网络连通性正常
• 检查fetch请求配置，确保Content-Type、鉴权Token等必要请求头没有漏传
• 临时关闭系统代理、抓包工具等可能拦截网络请求的软件后重试

内容的提问来源于stack exchange，提问作者Daniel Christian Mandolang