React Native / Expo : Fetch抛出“Network request failed”

10 浏览
0 Comments

React Native / Expo : Fetch抛出“Network request failed”

我在这个问题上看到了几篇帖子,但没有结果。一方面,我有一个表单收集信息(姓名,名字等),然后将其保存在数据库(mongodb)中。当我使用postman通过路由/ signup发送我的信息时,一切正常,我可以在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(“注册正在运行…”);

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;

以下是错误的屏幕截图:

https://i.stack.imgur.com/zuOdH.png

再次使用Postman时,提取工作正常,我的控制台日志被打印并且用户被添加到我的数据库中。

-编辑-

我通过Expo在Web浏览器中启动应用程序,一切都完美运行。我的登录/注册页面和我的帐户页面,但在我的手机上(IOS)却不起作用,这是我的手机的网络问题(可能是证书问题,错误的IP?)

如果你有什么想法,我很感兴趣。

0
0 Comments

React Native / Expo : Fetch throws “Network request failed”问题的出现原因是使用expo时,应该使用设备的IP地址而不是'localhost'。解决方法是确保电脑和手机连接到同一个网络,然后在命令提示符中输入ipconfig/all来找到IP地址。更新:看起来这是我的问题,加上我的室友占用了WiFi带宽。慢的互联网连接也可能是个问题。祝你解决问题。

0
0 Comments

问题原因:在使用Expo进行开发时,使用fetch方法请求后端API数据时出现了网络请求失败的错误。具体原因是在使用Android模拟器时,fetch方法无法找到服务器的地址。

解决方法:将fetch方法的请求地址从"http://localhost:3000/playlist"改为"http://10.0.2.2:3000/playlist",然后问题得到解决。使用10.0.2.2作为请求地址的原因是Android模拟器无法直接访问本地服务器的地址。

这种解决方法比使用IP地址更简便,因为IP地址可能会发生变化。更多关于为什么使用10.0.2.2而不是计算机IP地址连接本地Web服务器的信息,请参考这里的问题解答:why do we use 10.0.2.2 to connect to local web server instead of using computer ip address in android client

0
0 Comments

React Native / Expo: Fetch请求失败问题的原因是模拟器的localhost和服务器的localhost之间存在冲突。解决方法是使用本地IP地址替代localhost,并确保后端服务器也使用相同的主机和端口。具体步骤如下:

1. 在终端中使用命令'ipconfig'找到你的Ipv4地址,比如192.138.1.40。

2. 将该IP地址放入fetch请求的URL中,例如'http://192.138.1.40:8000/'。

3. 确保后端服务器使用相同的主机和端口。对于Python Django,可以使用以下命令运行服务器:

py manage.py runserver 192.138.1.40:8000

4. 在Django的settings.py文件中添加ALLOWED_HOSTS = ['192.138.1.40']。

5. 这个问题与IP地址无关,而是与使用localhost在应用程序中的问题有关。以上步骤将帮助你解决问题。

在Mac上,可以使用命令'ipconfig getifaddr en0'获取IP地址。更多信息请参考链接

0