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

Question

我正在构建一个使用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，并且非常感谢任何帮助。

Answer 1

我怀疑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中。

Answer 2

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

更多详情请见：dropna

Answer 3

为Laravel创建了解决方案并可以响应本机（物理设备）

1. 打开cmd运行ipconfig复制ipv4地址，例如我的ipv4地址是192.168.43.235
2. 为笔记本电脑和物理设备连接同一网络，或打开热点并连接同一网络
3. 现在运行命令start laravel backend php artisan serve --host=192.168.43.235 --port=8000
4. 通过react native api服务更改api网址

apiServise.js

    import axios from 'axios';
    
    const api_url = 'http://192.168.43.235:8000';
    
    export const getCategories = request =>
  axios
    .get(api_url + '/api/categories', {
      params: request || {},
    })
    .then(response => response.data);

homescreen.js

import {getCategories} from '../services/ApiService';

async fetchCategories() {
    await getCategories()
      .then(response => {
        this.setState({
          dataCategories: response
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

1. 现在运行命令开始对本机应用react-native run-android做出反应

仅此而已...现在api请求工作正常。

Answer 4

使用http://localhost:8000/api/establishments/get更改本地主机，您的模拟器通常可以达到10.0.2.2;）可以使用。