使用Expo CLI开发React Native应用出现网络连接错误无法调用服务端接口

问题解决步骤 #

• 安卓端明文HTTP限制修复
  安卓9及以上系统默认禁止HTTP协议请求，你的请求地址为HTTP协议，需额外配置：

  1. 在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">192.168.1.110</domain>
      </domain-config>
  </network-security-config>
  

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

  android:networkSecurityConfig="@xml/network_security_config"
  

  若使用安卓模拟器测试，可将请求IP替换为模拟器专属宿主机映射地址10.0.2.2。

• iOS端HTTP限制修复
  打开ios/项目名/Info.plist，添加如下配置允许HTTP请求：

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

• 添加请求超时配置避免阻塞
  你的当前代码未设置超时时间，无响应时会一直挂起，修改axios请求配置添加超时：

  axios.post(url, credentials, { timeout: 10000 }) // 10秒超时自动中断
  

• 网络连通性校验

  1. 确认运行React Native应用的设备/模拟器和服务端所在电脑处于同一局域网
  2. 关闭电脑系统防火墙，或在防火墙入站规则中放开5000端口的访问权限
  3. 在测试设备的系统浏览器中直接访问http://192.168.1.110:5000，确认可以正常加载服务端响应

• 请求参数格式校验
  确认Postman测试时的请求体格式：

  • 若服务端要求application/x-www-form-urlencoded格式，需先用qs序列化参数再提交：

  import qs from 'qs'
  axios.post(url, qs.stringify(credentials), {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  })
  

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