如何解决 React Native 中的“TypeError：网络请求失败”？

Question

环境

我正在使用 React Native 和 Expo 开发一个移动应用程序。

另外，在我的本地环境中使用 Laravel 开发 api。(http://localhost:8000/)

该应用程序正在世博客户端应用程序上运行。

我正在尝试做什么

我想从api获取数据。

代码

应用程序.js

componentDidMount() {
  return fetch('http://localhost:8000/api/test')
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson);
    })
    .catch((error) => {
      console.error(error);
    });
}

错误

类型错误：网络请求失败

世博版

3.22.3

如果您能给我任何建议，我将不胜感激。

Answer 1

您不应使用http://localhost:8000您的基本 URL，请使用您的 IP 地址。

如果您使用 Macbook，您可以在系统偏好设置 > 网络中找到 IP

fetch('http://172.20.10.5:8000/api/test')然后在您的 React Native 应用程序中使用。

如果通过浏览器访问时我的基本 URL 是http://172.20.10.5:8000/mysite/api/test您需要在 React Native 中获取fetch('http://172.20.10.5:8000/mysite/api/test')

基本上，android 和 ios 不允许使用 HTTP 请求，您需要执行以下操作以允许 HTTP 连接而不是 HTTPS。

安卓

然后在 Android 清单中添加 android:usesCleartextTraffic="true"android/app/src/main/AndroidManifest.xml

iPhone

将其添加到 info.plist 中

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

Answer 2

尝试使用http://10.0.2.2/api/test

模拟器具有用于本地主机连接的特殊 IP 地址。

检查一下这个表

在这里阅读相关内容