Network Error in axios post request react-native

Question

This is my method to checking Auth by axios post request

CheckAuth() {
    let obj = {
                username: 'axy@gmail.com',
                password: 'zzxxz'
            }
    //oauth_credentials imported 

    let form_data = Object.assign(obj, oauth_credentials)

    axios({
           method: 'post',
           url: routes.oauth_token,
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
             'Accept': 'application/json',
           },
           data: form_data
         })
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log(err)
            })
   }

I want to send post request to get token but when i try, It show a Network error in console which is below

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:546)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:381)
    at XMLHttpRequest.js:485
    at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
    at MessageQueue.__callFunction (MessageQueue.js:306)
    at MessageQueue.js:108
    at MessageQueue.__guard (MessageQueue.js:269)

I faced the same issue. take a look https://stackoverflow.com/a/74360433/17643554 — skan19, Nov 08 '22 at 12:08

score 7 · Answer 1 · answered Sep 06 '19 at 07:13

7

If you are facing this error on Android 9, the solution is to add android:usesCleartextTraffic="true" in your AndroidManifest.xml.

Cleartext is any transmitted or stored information that is not encrypted or meant to be encrypted.

As you are using http and not https, Android Pie will block your requests because cleartext traffic is not permitted by default in Android Pie.

answered Sep 06 '19 at 07:13

Yasir Lateef

71
1
2

What about iOS ? – Muhammad Ashfaq Jan 06 '20 at 11:49
i'm facing the similar error. I'm using https in the url but it's not work. what will be the impact of adding this option in versions prior to android 9 ? – William Bridge Sep 16 '20 at 03:27
@WilliamBridge did you solved this? – AMAL MOHAN N Jun 21 '22 at 11:56

Wes Guirra · Answer 2 · 2018-08-26T15:26:00.400

4

Try running emulator with emulator -avd your_avd_name -dns-server 8.8.8.8 I mean make sure your emulator has an internet connection.

edited Aug 26 '18 at 15:26

answered Aug 26 '18 at 14:19

Wes Guirra

165
2
14

1

make sure your emulator has an internet connection. this was the issue thanks – Thameem May 20 '19 at 20:57

Mohamed Khalil · Answer 3 · 2017-09-19T19:19:49.780

0

You are generating a preflighted request because your content-type in header is application/x-www-form-urlencoded the docs https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

preflighted requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.

you must ensure the server can manage the OPTIONS request for it to work. or remove it from your request

edited Sep 19 '17 at 19:19

answered Sep 19 '17 at 19:05

Mohamed Khalil

3,036
1
20
26

what auth method do you use in server? – Mohamed Khalil Sep 19 '17 at 19:52

score 0 · Answer 4 · answered Sep 19 '17 at 20:07

   async getToken(username, password) {
    //request server for token
    try {
        let credential = {
            username: Constant.CLIENT_ID,
            password: Constant.CLIENT_SECRET
        };
        //QueryString is a package
        let data = QueryString.stringify({
            username: username,
            password: password,
            grant_type: 'password'
        });

        //for ios url should be https and for android http
        const requestURL = 'url';
        const response = await axios.post(requestURL, data, {
            auth: credential,
        });
        console.log(response.data);

    } catch (error) {
        if (error.response.status === 401) {

        } else {

        }
    }
}

score 0 · Answer 5 · answered Aug 06 '18 at 12:38

0

try to change the adb port. write this command

adb reverse tcp:8880 tcp:8880; adb reverse tcp:8081 tcp:8081; adb reverse tcp:8881 tcp:8881

answered Aug 06 '18 at 12:38

jsina

4,433
1
30
28

score -1 · Answer 6 · answered Apr 14 '21 at 12:44

-1

you go to my command prompt (CMD) or terminal and then type ipconfig its show me the IP address of my machine

answered Apr 14 '21 at 12:44

Ahmad Tech

21
1
1

Network Error in axios post request react-native

6 Answers6

Linked