React Native / Expo : Fetch抛出“Network request failed”
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?)
如果你有什么想法,我很感兴趣。
问题原因:在使用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
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地址。更多信息请参考链接。