如何在React Native中解决``TypeError：网络请求失败''？

Question

环境

我正在使用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);
    });
}

错误

TypeError：网络请求失败

展览会版本

3.22.3

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

Answer 1

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

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

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

如果通过浏览器访问时我的基本URL是http://172.20.10.5:8000/mysite/api/test，则需要获取响应本机fetch('http://172.20.10.5:8000/mysite/api/test')

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

android

，然后在您的Android清单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>