React Native / Expo：Fetch 抛出“网络请求失败”

Posted 2023-03-03

【中文标题】React Native / Expo：Fetch 抛出“网络请求失败”

【英文标题】：React Native / Expo : Fetch throws “Network request failed”

【发布时间】：2020-06-23 16:05:21

【问题描述】：

我看到了几篇关于这个主题的帖子，但没有结果。一方面，我有一个收集信息（姓名、名字等）然后将其保存在数据库（mongodb）中的表单。当我使用邮递员通过路由/注册发送我的信息时，一切正常，我可以在 mongodb 中看到我的新用户。但是当我在 Expo 上启动应用程序时，他向我抛出“网络请求失败”。

前端获取：

submitForm = () => 
  var signupData = JSON.stringify(
    first_name: this.state.firstName,
    last_name: this.state.lastName,
    email: this.state.email,
    password: this.state.password
  );

  fetch(`https://localhost:3000/signup`, 
    method: "POST",
    headers:  "Content-Type": "application/json" ,
    body: signupData
  )
    .then(response => 
      console.log(response);
      return response.json();
    )
    .then(data => 
      if (data.result) 
        this.props.handleUserValid(
          this.state.firstName,
          this.state.lastName,
          this.state.email,
          data.user.token
        );
        this.props.navigation.navigate("Account");
      
    )
    .catch(error => 
      console.error(error);
    );
;

和后端路由：

router.post("/signup", function(req, res, next) 
  var salt = uid2(32);

  console.log("Signup is running...");
  const newUser = new userModel(
    first_name: req.body.first_name,
    last_name: req.body.last_name,
    email: req.body.email,
    password: SHA256(req.body.password + salt).toString(encBase64),
    token: uid2(32),
    salt: salt
  );
  newUser.save(function(error, user) 
    console.log("LOG: user", user);
    res.json( result: true, user );
  );
);

module.exports = router;

这是错误的截图

再次使用 Postman 时，提取工作正常，打印了我的控制台日志并将用户添加到我的数据库中。 感谢您的帮助。

-- 编辑--

我通过 Expo 在网络浏览器中启动了该应用程序，一切正常。我的登录/注册页面和我的帐户页面。但是在我的手机上它不起作用（ios），这是我手机的网络问题（可能是证书问题，IP错误？）

如果你有一个我感兴趣的想法，我已经坚持了 2 天

【参考方案1】：

在 React-native Expo 和 Python Django 后端有同样的问题。 问题是关于模拟器本地主机和服务器本地主机之间的冲突。 您的后端服务器可能在 127.0.0.1:8000 上运行，但模拟器找不到。

在终端中使用命令“ipconfig”找到您的 IPv4 地址。 例如，它将是 192.138.1.40

在此之后将其放入您的 fetch ( 'http://192.138.1.40:8000/'）。 还有一点也很重要 - 使用相同的主机和端口运行您的后端服务器。 以 python Django 为例：

py manage.py runserver 192.138.1.40:8000

在 Django 上，您还需要在 settings.py 中添加 ALLOWED_HOSTS = ['192.138.1.40']

【讨论】：

这是 fetch 在 react native 问题上，ipaddress 没有。

【参考方案2】：

在使用 expo 时，请使用您的设备（计算机）的 IP 地址（http://192.168.x.x:3000/'signup'），而不是“localhost”。这种方法对我有用。确保您的 PC 和移动设备连接到同一网络。在命令提示符中输入ipconfig/all 以查找IP 地址。

更新：

似乎这是我的问题加上我的室友占用 wifi 带宽。缓慢的互联网连接也可能是一个问题。 ATB 解决您的问题。

【参考方案3】：

Expo 遇到了同样的问题：获取错误。对于我的后端。我使用 json-server 来模拟 API 数据。就我而言，json-server 运行在 http://localhost:3000/playlist

我没有 fetch("http://localhost:3000/playlist")，而是 fetch(http://10.0.2.2:3000/playlist)，然后它起作用了。使用安卓模拟器，找不到服务器地址。

关于使用 10.0.2.2 的原因，请查看此处。 why do we use 10.0.2.2 to connect to local web server instead of using computer ip address in android client

【参考方案4】：

你应该检查网址

https://localhost:3000/signup(X) http://localhost:3000/signup(O)

不是 HTTPS

【讨论】：

我已经试过了，没有任何改变，我找不到问题的根源

【参考方案5】：

如果有人在使用托管后端服务器时遇到此问题，请告知您。

使用 react native expo cli 后端（Spring Boot）托管在 Azure 服务器上（例如 URL：https://abcd-spring-app.azurewebsites.net）。使用了 HTTPS。

但我仍然面临以下问题。

 Network request failed at node_modules\whatwg-fetch\dist\fetch.umd.js:535:17 in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

经过一番研究，我发现这是因为服务器的响应时间很慢。由于超时，网络请求失败。

因此，在使用后端服务器测试您的应用程序之前，请从网络（或任何其他方式）发送一些请求并上传您的服务器。因为一些服务器在一段时间后变得不活跃。确保您有良好的连接。