Android上的React Native Fetch返回网络请求失败

Posted 2021-03-28

我正在构建一个使用Laravel后端的React Native移动应用程序，当前在localhost：8000上运行。当从android设备向我的服务器发送获取请求时，我的应用程序会收到以下错误日志：

我的代码如下：

export default class App extends Component {
 login() {
    fetch('http://localhost:8000/api/establishments/get')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log('success!');
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return (
      <TouchableOpacity activeOpacity={.5} onPress={() => this.login()}>
        <Text>Sign In</Text>
      </TouchableOpacity>
    );
  }
}

当我将确切路由复制并粘贴到浏览器中时，服务器会按预期成功完成响应。我相信这是我的应用程序的网络权限问题？我刚刚开始学习一周前的React Native，并且会感激任何帮助。

答案

我怀疑127.0.0.1或localhost将指向服务器当前正在运行的计算机中的模拟器本身。如果您使用的是AVD，请尝试将10.0.0.0.1 / localhost替换为10.0.2.2，如果您使用的是Genymotion或使用计算机的实际IP地址，请尝试将其替换为10.0.3.2。此外，您还应该确保您的Android应用程序可以使用互联网。你可以通过添加来做到这一点

<uses-permission android:name="android.permission.INTERNET" />

在AndroidManifest.xml中。

另一答案

Android在模拟器中运行，而Android在模拟器中运行。仿真器模拟真实设备，而模拟器仅模仿设备。因此，Android上的localhost指向模拟的Android设备，而不是运行服务器的计算机。您应该使用计算机的IP地址在您的请求路径中更改localhost。

更多细节：https://github.com/facebook/react-native/issues/10404#issuecomment-267303151