从 laravel API 获取数据以响应本机应用程序（使用 expo 创建）

Question

我使用 expo 创建了一个 react native 应用程序，我运行在 android 带有 expo 应用程序或 USB 数据线的设备，以及我正在使用的 laravel APi在实施身份验证之前测试是否一切正常，问题是我总是收到错误消息（我在获取函数中定义了它），我说可能是因为 URL 但是当我尝试它时网络工作正常！我希望这个解释很清楚！ 我需要帮助才能将数据从 laravel api 获取到 React 本机应用程序！

原生反应：

构造函数代码：

 constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
    };
  }

这是获取函数：

_onLoginPressed = () => {
    fetch("http://127.0.0.1:8000/api/indexp", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },

    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);

          Alert.alert("logged");

      })
      .catch((error) => {
        console.log('erroc message');
      });
  };

世博会是运行nig 这个地址 (LAN): exp://192.168.1.4:19000

laravel :

在api.php

Route::get('indexp','PostsController@indexp');

在 PostsController 中：

  public function indexp()
    {
        $post = Post::all();

        return response()->json($post);
    }

如果我安装 android studio 并在模拟器上运行它可能会工作？

Answer 1

您的问题出在提取请求上。您需要访问 API 服务器的 IP，在本例中是您 PC 的 LAN 地址（运行 ifconfig on linux 或 ipconfig in windows）。然后你必须以该 IP 作为主机启动你的网络服务器，并根据需要设置一个端口，即 php artisan serve --host 192.168.10.100 --port 8000，这里的IP是你电脑的IP，端口是你喜欢的。

然后根据您的提取请求，您必须转到 http://192.168.10.100:8000/api/indexp 并从那里获取结果。我建议不要在每个文件上获取 IP 和端口，而是将它们放在配置文件中，这样如果您需要更改它们，您只需更改一个地方

Answer 2

如“julix”所说，问题出在 URL，expo 或 react native 应用程序无法识别 http 请求 localhost 而是使用您的 ip 地址，laravel 手动设置服务器的主机从默认的 127.0.0.1 到 192.168.0.1（您的 IP 地址），端口为 8000

从 laravel API 获取数据以响应本机应用程序（使用 expo 创建）

fetching data from laravel API to react native app ( created with expo )

api

laravel

react-native

react-native-android

expo