React Native/Expo:Fetch 抛出“网络请求失败" [英] React Native / Expo : Fetch throws “Network request failed”

问题描述

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

I saw several posts on the subject but without result. I have on the one hand a form which collects information (name, first name etc) then saves it in database (mongodb). Everything works when I use postman to send my information via the route / signup, i can see my new user in mongodb. but when i'm starting the app on Expo he throw me "Network request failed".

前端获取:

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 时，获取工作正常，我的控制台日志被打印出来并且用户添加到我的数据库中.感谢您的帮助.

Again when using Postman, the fetch is working good, my console log is printed and the user added to my data base. Thanks for the help.

-- 编辑 --

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

I launched the application in a web browser via Expo and everything works perfectly. My sign in / sign up pages and my account page. But on my phone it's not working (IOS), it's a network problem from my phone (maybe a certificate problem, wrong IP ?)

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

if you have an idea i'm interested, i've been stuck on it for 2 days

推荐答案

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

Had the same issue with React-native Expo and Python Django back-end. The problem is about a conflict between an emulator localhost and server localhost. Your back-end-server might be ruunning on 127.0.0.1:8000, but an emulator can't find this.

在终端中使用命令ipconfig"找到您的 Ipv4 地址.例如，它将是 192.138.1.40

In terminal find your Ipv4-Address with a command 'ipconfig'. For ex., it will be 192.138.1.40

在此之后将其放入您的提取中('http://192.138.1.40:8000/').
同样重要的是 - 使用相同的主机和端口运行您的后端服务器.
以python Django为例:

After this put it into your fetch ( 'http://192.138.1.40:8000/').
And what is also important - run your back-end-server with the same host and port.
On python Django for example:

py manage.py runserver 192.138.1.40:8000

py manage.py runserver 192.138.1.40:8000

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

On Django you will also need to add ALLOWED_HOSTS = ['192.138.1.40'] in settings.py

这篇关于React Native/Expo:Fetch 抛出“网络请求失败"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！