Connect to API local error with 'fetch'

Help: Expo SDK
#1

Please provide the following:

  1. SDK Version: “expo”: “~38.0.8”,
  2. Platforms(Android/iOS/web/all): Android - iOS

code:
userLogin = () => {

    const {username, password} = this.state;

    

    const url = 'http://localhost:8080';

    const credentials =  'angularapp'+ ':' + '12345'

    fetch( url + '/oauth/token', {

      method: 'POST',

      

      headers: {  'Accept': '*/*', 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Basic' + credentials },

      body: JSON.stringify({

          grant_type: 'password',

          username: username,

          password: password

      })

    })    .then((response) => response.json())

    .then((responseData) => { 

        console.log("response: " + responseData);

        this.navigation.navigate('TabViwew')

    })

    .catch((err) => { console.log(err);

});

}

error:
Network request failed

  • node_modules\whatwg-fetch\dist\fetch.umd.js:527:17 in setTimeout$argument_0
  • node_modules\react-native\Libraries\Core\Timers\JSTimers.js:135:14 in _callTimer
  • node_modules\react-native\Libraries\Core\Timers\JSTimers.js:387:16 in callTimers
  • node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction
  • node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0
  • node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
  • node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
  • [native code]:null in callFunctionReturnFlushedQueue
#2

I did not have a look at your code, but in cases of “Network Request Failed”, I usually run the exact same request using Postman or something similar just to make sure that the error is part of the app and not on the server.

Hope that helps.

#3

This looks like the function didn’t even perform the request at all, if it did, it should have returned even the Response Code as a hint.

I am not sure about your specific problem but here are my suggestions as to what you can do.

  1. I think this has something to do with CORS error because your making an app connect to a localhost which has many security barriers.
  2. You could try exposing your local angular app by using ngrok. The command usually goes like this ngrok http 8080. The ngrok endpoint you get, you can use to replace your url with something more accessible. Visit ngrok here: https://ngrok.com/
  3. If your going to send a JSON data, might as well change your accept and content-type to application/json since you already expect a json value.
  4. Authorization usually follows this pattern
Basic YWxhZGRpbjpvcGVuc2VzYW1l

It’s available here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization
I noticed your authorization does not include a space between Basic and the credential (the space between is important).

Hope you get your problem fixed soon.

1 Like
#4

Hi!
Thanks for reply!
I change some things and now the console show this error.

Object {
“error”: “unauthorized”,
“error_description”: “Full authentication is required to access this resource”,
}

This is my code now.
userLogin = async() => {

     var data = new FormData();

     data.append('grant_type', 'password')

     data.append('username',this.state.username)

     data.append('password',this.state.password)

    const url = 'http://64.225.122.237:8080/oauth/token';

    const credentials =  'angularapp'+':'+'12345'

    fetch( url ,{

      method: 'POST',

       headers: {  

        'Accept': '*/*', 

        'Content-Type': 'application/x-www-form-urlencoded',

        'Authorization': 'Basic YW5ndWxhcmFwcDoxMjM0NQ==' + credentials},

        'Connection': 'keep-alive',

      body: JSON.stringify(data)

    })   .then((response) => response.json())

         .then((responseData) => { 

         console.log(responseData);

                     

    })

    .catch((err) => { console.log(err);

});

}
I run the request in Postman and there is works.

I don’t know why show me this error.

#5

Hi!
Thanks for reply.
I run the same request in postman and there it works.
So, now my code is this:

userLogin = async() => {

     var data = new FormData();

     data.append('grant_type', 'password')

     data.append('username',this.state.username)

     data.append('password',this.state.password)

    

    const url = 'http://64.225.122.237:8080/oauth/token';

    const credentials =  'angularapp' + ':' + '12345'

 

    fetch( url ,{

      method: 'POST',
       headers: {  

        'Accept': '*/*', 

        'Content-Type': 'application/x-www-form-urlencoded',

        'Authorization': 'Basic YW5ndWxhcmFwcDoxMjM0NQ==' + credentials},

        'Connection': 'keep-alive',

      body: JSON.stringify(data)

    })   .then((response) => response.json())

         .then((responseData) => { 

         console.log(responseData);

                     

    })

    .catch((err) => { console.log(err);

});

}

error:
Object {
“error”: “unauthorized”,
“error_description”: “Full authentication is required to access this resource”,
}

#6

Is that trailing } supposed to be there?

It looks like the request is unauthorized so you need to have a look at the token and make sure it is valid. Also, make sure you are sending all the required headers.