React Native请求Laravel HTTP服务接口报Network Error问题求助

• 优先排查axios配置拼写错误：你提供的axios实例配置中使用了baseUrl字段，axios官方要求的基础地址配置项为驼峰全大写的baseURL，拼写错误会导致全局配置不生效，可先直接调用全局axios方法跳过自定义实例测试：

  // 直接调用全局axios，不使用自定义实例
  axios.get("http://你的实际IP:8000/myProject/api/test")
    .then(res => console.log(res.data))
    .catch(err => console.log(err))
  

• 确认运行环境的IP正确性：
  • 如果使用安卓模拟器测试，不能直接填电脑的局域网IP，需要改用安卓模拟器默认的宿主机映射地址10.0.2.2，地址替换为http://10.0.2.2:8000/myProject/api/test测试
  • 如果使用真机测试，确认手机和电脑连接同一WIFI，关闭电脑防火墙、VPN/代理工具，确认8000端口对外放开
• 排查Laravel跨域配置：手机浏览器对本地服务的跨域限制宽松，React Native的网络请求会严格校验跨域头，可先在测试路由中临时添加跨域头验证：

  Route::get('/test', function(){
      header('Access-Control-Allow-Origin: *');
      return response()->json([
          'data' => 'test'
      ]);
  });
  

  确认是跨域问题后，安装Laravel官方的CORS扩展配置正规跨域规则即可。
• 确认原生配置生效：修改AndroidManifest.xml后必须卸载原有APP，重新执行react-native run-android编译安装新包，热更新、重载都不会更新原生配置。
• 替换网络请求工具验证：可先用RN原生的fetch方法调用接口，排除axios本身的版本兼容问题：

  fetch('http://你的实际IP:8000/myProject/api/test')
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.log('fetch报错：', err))
  

• 更换服务端口测试：避免8000端口被系统拦截或者占用，可指定其他端口启动Laravel服务：

  php artisan serve --host=0.0.0.0 --port=8080
  

  同步修改请求地址的端口后重新测试。

内容的提问来源于stack exchange，提问作者Michel Gisenaël