AxiosError : Network Error at XMLHttpRequest.handleError

Question

getting AxiosError: NetworkError only when i'm trying to run my website on my mobile and working perfectly fine in computer

this is a login page in react

import React, { useState } from "react";
import { Navbar } from "./header";
import axios from "axios";
export function Login(){ 
    const [data,setdata] = useState([{email:"",password:""}])
    const [mssg,setmssg] =useState("")
    function homepage(){
        window.open('/homepage','_self')
    }
  function check_user(){
axios.post('http://localhost:4000/chekuser',data)
.then(res=>{
    console.log(res.data)
    setmssg(res.data)
})
  }
const collect=(e)=>{
    setdata({...data,[e.target.name]:e.target.value})
   
}
return(
    <div>
<Navbar></Navbar>
<div id="form">
<h1 id="heading">Login</h1>
<h3 className="entries">UserName</h3>
<input name="email" onChange={collect} type="text" placeholder="Enter your email"></input>
<h3 className="entries">Password</h3>
<input name="password" onChange={collect} type="text" placeholder="Enter your Password"></input>
<button onClick={check_user}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className ="bi bi-arrow-right" viewBox="0 0 16 16">
  <path fillRule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</button>
<p>don't have account yet? <a href="/signin">click here</a></p>
<p style={{color:"red"}}>{mssg}</p>
</div>
    </div>
)
}

this is backend in javascript with mongodb

const express =require('express')
const cors= require('cors')
const bodyParser=require('body-parser')
const mongoose=require('mongoose')
 const app=express();
 app.use(cors())
 app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))
var model;
async function connection(){
    await mongoose.connect('mongodb+srv://ohyrt:[email protected]/quiet?retryWrites=true&w=majority',{useNewUrlParser:true})
    .then( console.log("connected"))
    const schema=new mongoose.Schema({
       Name:String,
        Email:String,
        Password:String,
        Username:String
    })
    
 model = mongoose.model('newuser',schema)
}


connection()
app.get('/',(req,res)=>{
    res.send("Hello world")
})
app.post('/creatuser',(req,res)=>{
 const user=new model({Name:req.body.Name,
    Email:req.body.Email,
    Password:req.body.Password,
    Username:req.body.Username })
 user.save()

})
app.post('/chekuser',async (req,res)=>{
    let email =req.body.email;
    let password = req.body.password
 model.findOne({Email:email})
 .then(user=>{
    if(user){
        if(user.Password===password){
            console.log("user found")
        }else{
            console.log("incorrect password")
            res.send("incorrect password")
        }
    }
    else{
        console.log("no user")
        res.send("user didn't exsist")
    }
 })
})
 app.listen(4000)

AxiosError : Network Error at XMLHttpRequest.handleError

i;m getting this error in signin page also i have tried some methods from stackoverflow but nothing works.

i want to make a website which can workon both mobiles and pc and i'm using MERN stack for developing the website

Answer 1

Add a catch to your api calling in React that will handle your error and show you correct error you are getting

axios.post('http://localhost:4000/chekuser',data)
.then(res=>{
    console.log(res.data)
    setmssg(res.data)
})
.catch((err)=>{
  console.log(err)
});