Axios giving Network error in React Native

Question

I am using Expo Client for development and I am not able to send a login API call.

onSubmit fuction

const onSubmit = async (username, password)=>{
    console.log(username);
    console.log(password);
    await axios.post(
        'https://backend.unknownchats.com/accounts/login/',
        {
            username: username,
            password: password,
        },
        {
            headers: {
            'Content-Type': "application/json",
            'Accept': "application/json",
            }  
        }        
    ).then(res=>{
        console.log(res.data);
        if (res.data.status==="success"){
            localStorage.setItem('username',res.data.username);
            localStorage.setItem('token',res.data.token);
            navigation.navigate('Settings');
        }else{
            setError(res.data.error);
        }
    }).catch(err=>console.log(err));
}

Take a look at the attached error code.

sumit 97127516

Network Error
at node_modules\axios\lib\core\createError.js:17:22 in createError
at node_modules\axios\lib\adapters\xhr.js:120:6 in handleError
at node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:609:10 in setReadyState
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:396:6 in __didCompleteResponse
at node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:135:10 in EventEmitter#emit
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

SwiftyJoeyy · Accepted Answer · 2022-10-31 14:11:24Z

3

I've tested your code, there is no syntax error. But I noticed that the server doesn't respond to the request. When tested with anther baseUrl, it works great. But with https://backend.unknownchats.com/accounts/login/ I got the same error as you, Network error, in insomnia and postman, I got a SSL error. So the problem is not your code, but the server.

My advice is to test your api requests on Insomnia or Postman, before using it.

So.. the first thing is that you're using the "await" and "then" async method in the same async function.

The best method is using "await".. surrounded by try catch.

Another tip is that, when the object key is the same as the prop passed in value, you can use only the prop name, I'll set above.

The second point is that, axios has its own error data handler. The error you sent, is the default one.

So, to see the error data, you can console.log(error.response.data) in catch.

try{
 const {data} =  await axios.post(
        'https://backend.unknownchats.com/accounts/login/',
        {
            username,
            password,
        },
        {
            headers: {
            'Content-Type': "application/json",
            'Accept': "application/json",
            }  
        }   
     );
   console.log(data);      
 }catch(e){
   console.log(e.response.data);
 }

Let me know if you could find the response error.

Cheers! :D

edited Oct 31, 2022 at 14:11

SwiftyJoeyy

5,2242 gold badges19 silver badges41 bronze badges

answered Mar 20, 2022 at 4:42

Jhony Spark

1665 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sumit Dhakad Over a year ago

I tried with the above code means with try and catch and I am also using Axios' error I also try without async and await but it is still not working.

Jhony Spark Over a year ago

I've tested your code, there is no sintax error, but i notice that the server doesnt respond the request. whentested with anther baseUrl, it works good. but 'backend.unknownchats.com/accounts/login'.. i got the same error that you, Network error.. and in the insomnia and postman, got a SSL error. So the problem is not your code, but the server.

Sumit Dhakad Over a year ago

yeah you are right with http it is working fine but not with https

Jhony Spark Over a year ago

Nice, Can you acept the answer ? Ou vote up ?

Muhammad Haidar · Accepted Answer · 2022-09-30 11:55:35Z

-1

const config = {
  method: 'post',
  url: `${BASE_URL}/login`,
  headers: { 
    'Content-Type': 'multipart/form-data'.  <----- Add this line in your axios header
  },
  data : formData
};


  axios(config).then((res)=> console.log(res))

answered Sep 30, 2022 at 11:55

Muhammad Haidar

2,0971 gold badge24 silver badges22 bronze badges

Collectives™ on Stack Overflow

Axios giving Network error in React Native

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related