React Native中如何解决“TypeError: Network request failed”的问题？

Question

React Native中如何解决“TypeError: Network request failed”的问题？

reactjslaravelapireact-nativeexpo

7

环境

我正在使用React Native和Expo开发移动应用。

同时，在我的本地环境中使用Laravel开发api（http://localhost:8000/）。

该应用程序在Expo客户端应用程序上运行。

我的目标

我想从api获取数据。

代码

App.js

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

错误

类型错误: 网络请求失败

Expo 版本

3.22.3

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

- LPFJ

1

也许使用 https 更好？ - 高鵬翔

@高鵬翔非常感謝。我認為應該是“http”。 - LPFJ

2

iOS不会调用http的API，需要执行一些额外的步骤才能实现，可以搜索相关内容或者切换到https。 - Vaibhav Vishal

3个回答

5

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

模拟器对于本地连接有一个特殊的IP地址。

查看这张表格

在这里了解更多信息。

- Lolz

-1

如果这样还不行，就禁用你的防火墙。

- Max Ngassa

您的答案可以通过提供额外的支持信息进行改进。请编辑以添加更多细节，比如引用或文档，以便其他人可以确认您的答案是否正确。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- moxspoy · Accepted Answer

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

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

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

如果我通过浏览器访问时的基本 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 manifest 文件 android/app/src/main/AndroidManifest.xml 中添加 android:usesCleartextTraffic="true"。

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>