React Native 0.68.2 iOS端无法请求localhost本地接口报错

问题根本原因 #

iOS应用运行在独立沙箱网络环境中，代码中写的localhost、127.0.0.1指向的是运行App的iOS设备/模拟器自身的回环地址，并非启动XAMPP服务的开发机地址。Postman直接运行在开发机系统上，访问本机回环地址自然正常；但App访问自身回环地址找不到对应运行的服务，就会抛出Code=-1004 Could not connect to the server错误。
日志里的Flipper证书报错是调试工具的连接异常，和业务接口请求失败没有关系，直接忽略即可。

解决步骤 #

• 替换接口地址为开发机局域网IP（最稳定方案，无需额外折腾模拟器特殊配置）
  1. Mac终端执行ifconfig | grep "inet "，找到en0网卡对应的IPv4地址，通常是192.168.x.x格式
  2. 把App内的接口前缀从http://localhost替换为http://[查到的局域网IP]
  3. 先在开发机浏览器访问http://[局域网IP]/MyApp/business/public/api/get-offerings，确认能正常返回再启动App测试
  4. 真机调试场景下，确保手机和开发机连同一个WiFi，关闭两端的VPN、网络代理工具；第一次启动App弹出本地网络权限申请时选允许，误点拒绝的话去iOS设置-对应App页面手动开启本地网络权限
• 补全Info.plist网络配置
  只加NSAllowsLocalNetworking不够，iOS默认拦截明文HTTP请求，必须补全ATS（应用传输安全）配置，在Info.plist中添加如下内容：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsLocalNetworking</key>
      <true/>
      <key>NSExceptionDomains</key>
      <dict>
          <!-- 替换为你实际查到的开发机局域网IP -->
          <key>192.168.1.100</key>
          <dict>
              <key>NSIncludesSubdomains</key>
              <true/>
              <key>NSExceptionAllowsInsecureHTTPLoads</key>
              <true/>
          </dict>
      </dict>
  </dict>
  

• 检查XAMPP服务配置
  打开XAMPP的Apache配置文件httpd.conf，找到Listen配置项，确保值为Listen 0.0.0.0:80，不要设置为127.0.0.1:80——这种配置只会响应开发机本机请求，会拒绝所有局域网来源的访问，修改后重启Apache服务生效。

避坑提示 #

• 不用反复测试localhost和127.0.0.1，这两个地址永远指向iOS设备自身，不可能访问到开发机上运行的XAMPP服务
• 配置完仍报错的话，先临时关闭Mac防火墙和第三方安全软件测试，这类工具经常会拦截来自iOS模拟器/真机的入站请求

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