网络请求失败 - 从本地主机 ReactNative 获取

Question

在 Android 和 ios 设备上尝试从 ReactNative 中的本地主机获取网络请求失败时。

我尝试过遵循以前的解决方案，但似乎没有什么对我有用。我遵循了本教程：https://revs.runtime-revolution.com/connecting-react-native-to-localhost-65e7ddf43d02

对于 iOS： 我编辑了 info.plist 并添加了以下代码并在模拟器上重新安装了该应用程序，但它仍然无法正常工作。

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSExceptionRequiresForwardSecrecy</key>
                <false/>
                <key>NSIncludesSubdomains</key>
                <true/>
            </dict>
        </dict>
    </dict>

对于安卓： 我使用我的 IP 而不是“localhost”来获取 URL，但它仍然不起作用。我也按照教程中的步骤对 AndroidManifest.xml 进行了配置，但仍然不起作用。

还有其他解决办法吗？？？

PS。我正在使用 Macbook。我的 REST API 使用 SQL 数据库和 asp.net core。我正在尝试获取 json。

错误：网络请求失败

获取代码：

async getProjects1() {
    const response = await fetch('https://127.0.0.1:5001/api/projects');
    const data = await response.json();
    this.setState({ projects: data, loading: false }, function(){console.log(this.state.projects)});
  };

Answer 1

这些解决方案不起作用。

有什么作用：

下载 ngrok (https://ngrok.com/)、注册并连接您的帐户。 ngrok 创建一个私有 https 本地主机隧道。

设置 - https://dashboard.ngrok.com/get-started/setup

解压安装ngrok：

unzip /path/to/ngrok.zip

连接您的 ngrok 帐户（非功能示例身份验证令牌）：

ngrok config add-authtoken 2ySPR5UeS3Fjf5YAblNRe7ZcV1o_9sdf2SDFGHjEQaOCE6xEi

使用命令（带有您的端口号）：

ngrok http 8080

ngrok 上线后，替换您的本地主机 API 地址：

http://localhost:8080 
http://127.0.0.1:8080
http://192.168.0.100:8080

使用转发网址（非功能示例地址）：

https://ebda-61-137-45-130.ngrok.io

我已经使用 ngrok 在各种网络上测试 API，没有出现任何问题。到目前为止，这是我发现的使用 localhost 测试 API 的唯一万无一失的方法。

Answer 2

您的错误消息表明存在未处理的承诺拒绝，因此我建议添加错误处理：

async getProjects1() {
    try {
    const response = await fetch('https://127.0.0.1:5001/api/projects');
    const data = await response.json();
    this.setState({ projects: data, loading: false }, function(){console.log(this.state.projects)});
    } catch (err) {
      console.log(err)
    }
}

这个问题可能会得到解决，或者至少您可能会得到更清晰的错误消息。

Answer 3

我解决了这个问题。该错误不是因为 React Native 而是因为我的 asp.net core API。基本上，我只需要将 Properties 文件夹中的 launchsettings.js 中的代码从

"applicationUrl": "https://localhost:5001;http://localhost:5000"

更改为

"applicationUrl": "http://localhost:5000"

这解决了问题，并且在 React Native 中从本地主机获取数据没有任何进一步的问题。这个堆栈问题帮助我弄清楚了这一点：How to fix network error in react-native when access localhost api

Answer 4

使用此IP - http://10.0.2.2/,

而不是 http://localhost/ 和 http://127.0.0.1/