【问题标题】:React Native / Expo : Fetch throws “Network request failed”React Native / Expo:Fetch 抛出“网络请求失败”
【发布时间】: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 天

【问题讨论】:

    标签: api react-native express request fetch


    【解决方案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】:

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

        但我仍然面临以下问题。

         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
        

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

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2019-01-06
          • 1970-01-01
          • 2021-11-28
          • 2021-04-07
          • 2020-07-23
          • 2020-04-27
          • 2019-08-11
          • 1970-01-01
          相关资源
          最近更新 更多