React Native安卓模拟器中Axios调用API出现网络错误的问题排查求助

Hey there! Sorry to hear you're stuck with this API call issue in your React Native Android emulator—let's walk through the common fixes and checks step by step to get this sorted out.

首先，排查API地址的常见坑 #

• 如果你调用的是本地后端服务（比如localhost:3000），安卓模拟器不能直接识别localhost！得换成专用映射IP 10.0.2.2（这是安卓模拟器指向主机本地的默认IP），或者你电脑在局域网里的实际IP（比如192.168.1.100）。我自己刚开始做RN的时候踩过这个坑，白折腾了半小时😂
• 确认API的协议是http还是https，安卓9及以上对明文请求有严格限制，这个后面细说。

处理安卓的网络安全限制 #

从Android 9（API level 28）开始，系统默认会阻止明文的http网络请求，如果你的API是http协议，必须配置网络安全策略：

1. 在android/app/src/main/res/xml目录下创建network_security_config.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

2. 打开android/app/src/main/AndroidManifest.xml，在<application>标签里添加属性：

android:networkSecurityConfig="@xml/network_security_config"

如果是https API，要确保证书是正规有效的；如果是自签名证书，需要在上述配置里额外添加信任该证书的规则。

检查模拟器的网络状态 #

• 先确认模拟器能正常上网：打开模拟器自带的浏览器，随便访问一个网站（比如百度），如果打不开，说明模拟器本身网络有问题，重启模拟器或者电脑的网络试试，有时候模拟器的网络就是会抽风。
• 如果你电脑用了代理，模拟器的Wi-Fi代理也要同步设置：长按模拟器里连接的Wi-Fi网络，选择“修改网络”，手动设置和电脑一致的代理地址和端口。

如何查看API请求的详细状态 #

要排查请求失败的具体原因，得看到请求的详细信息：

• 用React Native Debugger：摇一摇模拟器（或者按Ctrl+M呼出菜单），选择“Debug JS Remotely”，然后在Chrome开发者工具的Network标签里就能看到所有请求了，包括失败请求的错误码、请求头、响应内容，一目了然。
• 在代码里加详细的错误捕获，打印更多信息：
  比如Axios的错误处理：

axios.post('你的API地址', 提交的数据)
  .then(res => console.log('请求成功:', res))
  .catch(err => {
    console.log('错误详情:', err.message);
    // 如果有响应，打印状态码和响应内容
    if (err.response) {
      console.log('响应状态码:', err.response.status);
      console.log('响应内容:', err.response.data);
    }
  });

用fetch的话也可以类似处理：

fetch('你的API地址', {
  method: 'POST',
  body: JSON.stringify(提交的数据),
  headers: { 'Content-Type': 'application/json' },
})
.then(res => {
  console.log('响应状态:', res.status);
  return res.json();
})
.then(data => console.log('返回数据:', data))
.catch(err => console.log('Fetch错误:', err));

最后，排查后端和本地环境 #

• 先确认你的API服务本身是正常的：用Postman或者curl命令测试一下API，看看能不能正常接收请求并返回响应。如果后端本身就挂了，模拟器肯定调用失败。
• 检查电脑的防火墙：如果防火墙拦截了后端服务的端口，模拟器也无法访问。可以暂时关闭防火墙试试，或者把后端端口加入白名单。

试试这些步骤，应该能找到问题所在！如果还是不行，可以把错误日志里的具体信息贴出来，大家再一起帮你排查~

备注：内容来源于stack exchange，提问作者Suresh Inti Naga