Axios Network Error in React Native with Expo in Android - android

I'm trying to run an API call in React Native on Android with Expo using Axios, but I'm encountering a network error. I tried some solutions, but nothing seems to work. This is the error displayed in the console:
Network Error
at node_modules\\axios\\lib\\core\\AxiosError.js:3:0in \<global\>
at node_modules\\axios\\lib\\adapters\\xhr.js:138:8 in handleAbort
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:647: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:150:10 in EventEmitter#emit
at node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:417:4 in callFunction
at node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:114:6 in guard$argument_0
at node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:368:10 in guard
at node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:113:4 in callFunctionReturnFlushedQueue
I tried changing the localhost in the API link to my IP address, as well as to 10.0.2.2, but nothing worked. I checked my internet permission in AndroidManifest and made some other permission changes to the file, but nothing seemed to resolve it. I hope to find a solution to the problem soon.

if you are using a tool like expo go, [axiosError: Network error] is simply an error saying that the api you provided may not be reached.
so if you want to pull data from a local storage instead of cloud storage ... you may create a server like for example php artisan serve then create an Ngrok server for that server , afterwards take the link you received from the ngrok then use it as your new API endpoint

i m the same problem. you found solution l

Related

Way ANDROID DEVICES can't send requests to my server

Hello Developers,
thanks for being helpful on all-time.
I'm working on a project it's working fine on Web Navigator Chrome,
but when I build the Android App using react-native, I found that I can't send requests to my server with any of Axios or fetch.
catch is always send
Error : Network Error, but it's working fine with other servers here's some Screenshots :
I can't figure this out, so I expect some help from u guys.
Add this to your android/app/src/main/AndroidManifest.xml and below permission is used for accessing ConnectivityManager.
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
I had this same problem before on Android with React Native.
Here are the steps that I did when debugging it:
Try to use Postman to check if your endpoint is working.
I was using GraphQL so I tested using fetch and axios to see if it returns the same network error.
Test on iOS to see if it works or not.
After I did the above, since I deployed my API app on my own server. I pointed my graphql request to my public IP (http://xxx.xxx.xxx.xxx/graphql) and it works. You might need to add android:usesCleartextTraffic = "true" to your AndroidManifest.xml to make request to http url.
I finally figured out that it was a problem with my SSL certificate that was installed on my domain. I re-installed it back with proper certificate.pem and intermediate.pem and my problem is fixed.

Http failure response for (unknown url): 0 Unknown Error on android

I have an ionic app that when I run that on iOS then it works perfectly fine but when I run that on Android I get this error
Http failure response for (unknown url): 0 Unknown Error
Any reason I am getting this one? I have allowed CORS on server side as it is working on iOS devices.
Any help?
EDIT
This is what I have in my app.js file
const cors = require('cors');
And then I simply use it with default options.
app.use(cors());
If you are using localhost, change it to the IP address of the localhost. Android doesn't seems to support it where iOS do.
Try actual host name in case it didn't work too.
First you dont need CORS to call API from your android device.
Second probably your server is not accepting your request. If you are using Cloud then your server must accept request from any IP. There must be a option for allow IP address, place there from 0.0.0.1 to 254.254.254.254 so that each and every user can call your API.
Third you need to allow origin from your config.xml and also in header for CROS request. Check your API header and config file.
And fourth If your service is running under http then it will also could be the problem. Secure your service by adding SSL certificate. This could fix your problem.
We had experienced the same Error several times in our App. In our case it was a problem with the headers of the request and also a CORS problem on the serverside.
Are you able to reproduce this error in the browser if you emulate a android device? Then you could compare them with the headers of the iOS request.
Or you can try to log the incoming requests on the server-side to see if the requests reach the server and what headers are set.
Hope my ideas help :)
The solution is to add NODE_TLS_REJECT_UNAUTHORIZED=0 to your environment to disable the SSL verification in Node.js.
Note : You should only set this in development, Don't do this in production
EDIT
In that case it indicates that CORS has not been properly setup on your server. Go through the issue here

Ionic native app is sending header Origin:file:// which causes problems

I have started building simple Todo app in Ionic 1 and I discovered a problem with Origin header. (CORS related)
If i run
ionic serve
everything works fine in browser and i can make requests to my REST API on apache(tomcat). But when build my app for android or even in ionic viewer, all requests fail. Using a chrome debugger I managed to locate the problem.
Native app sends header (tested only on android)
Origin: file://
which causes my server to deny requests. Seems to me that it should send correct Origin header with host. Screenshot with more details is attached below.
What can I do about that?
Found related topic here: CORS, Cordova, AngularJs $http and file:// confusion
Already posted here, with no luck: https://forum.ionicframework.com/t/native-app-is-sending-header-origin-file-which-causes-problems/62388/1
EDIT: Problem occurs when post, if I run ionic starter (tabs) template with only $http.post('http://myapp.com/apiv1/device') added to controller.
Try adding the following to your allowed origin request: "file://* filesystem: "
I had the same problem with <iframes> in Ionic and I fix it adding:
Header set Content-Security-Policy "...; frame-ancestors 'self' file://* file://*/* filesystem: http://localhost:*;"
It seems that the problem comes from the server (specifically from Tomcat).
According to this bug:
https://bz.apache.org/bugzilla/show_bug.cgi?id=60008
The default CORS filter provided by Tomcat (instances/shared/conf/web.xml) doesn't allow POST requests and returns 403.
The problem is solved from Tomcat version 8.0.37, so upgrading the server should solve your problem.
Regards.
I've came across this last week. I had to make POST request to JIRA api and I wasn't able to change server configuration.
Probably the easiest way is to make your own android plugin which sends POST request. If you send POST request from plugin, there is no Origin: file:// header and everything works fine. The plugin was like 2-3 hours of work.

Host is unresolved: api.twitter.com:80

I am implementing twitter for android. When i am requesting for Request Token. It throws me this error:
04-27 11:25:01.163: DEBUG/ERROR=(3467): Host is unresolved: api.twitter.com:80
Before it was working fine. Suddenly it started giving this error.
Thanks in advance, aby
That sounds like a DNS lookup error. If you have a network tool suite installed that allows nameserver lookups (GTech Net Tools is one of these, and it's free) try entering api.twitter.com to see if your emulator can resolve the IP address.
One other thing to note is that you should be using HTTPS to call the OAuth resources at Twitter. From the :80 on your request, you can tell that whatever called oauth/request_token used plain old HTTP. All network communication involved in negotiating your OAuth tokens should be secured.
I understand that we can use HTTP as well(If your system lacks a security cert). You can tell the library to use HTTP call by adding the following line before the initializing the Twitter connection object.
System.setProperty("twitter4j.http.useSSL","false");
I had the same problem and after many tries it seems that the problem was in the emulator.. when trying the program on 1.5 it worked. However, it didn't work on 2.1. I opened the native emulator browser on 2.1 and it failed to load the google page (probably the emulator got an internet connection problem)

How to debug http calls on Android devices?

I'm writing a Lovefilm client for Android, and it's not going too badly except I keep having problems with the remote calls to retrieve data from the API.
Does anyone have any tips for debugging remote calls like this? Can I tcpdump on Android or is there a native way of doing it?
For example, I'm using the Scribe-java library for OAuth to access the Lovefilm API, I can authenticate find and retrieve a list of films on the users account fine when the device is running Gingerbread, but trying to retrieve the accessToken on Froyo causes a blank response & and apparent response code of -1, I'd like to be able to see what's going on under the cvers their.
Another example I'd like to be able to the raw http for is trying to run a search, I get and IOError that says "Received authentication challenge is null"
I've used Fiddler (http-proxy for debugging http calls) with the android emulator in these cases. Just start the proxy, and start the emulator with the correct proxy address (-http-proxy ).
Fiddler is the most useful option. On the emulator #Scythe answer will work, but on a real device you will need to set the proxy in the Apache Http Client. The following code will do that:
HttpHost proxy = new HttpHost("youripaddr", 8888);
params.setParameter(ConnRoutePNames.DEFAULT_PROXY, proxy);
If you are using https, fiddler is not so useful. In that case can enable the build in logging support in Apache Http Client. The following code does that:
Headers only:
java.util.logging.Logger apacheHeaderLog = java.util.logging.Logger.getLogger("org.apache.http.headers");
apacheHeaderLog.setLevel(java.util.logging.Level.FINEST);
Headers & Wire:
java.util.logging.Logger apacheWireLog = java.util.logging.Logger.getLogger("org.apache.http.wire");
apacheWireLog.setLevel(java.util.logging.Level.FINEST);
Note that this will have to have a java.util.logging Handler configured at finest level and the default handler is configured to log to logcat, which will filter DEBUG (finest) entries by default.
If your system can share the wi-fi connection you should be able to route packets from any device through your system and then using wireshark you can get monitor your calls or get a tcpdump.
Also , and more importantly , it would be best if you log your network calls and responses as suggested by #Matthew
Windows 7 wi-fi connection sharing : http://www.winsupersite.com/article/faqtip/windows-7-tip-of-the-week-use-wireless-hosted-networking-to-share-an-internet-connection-wirelessly.aspx
Since I always run into similar troubles and it seems a lot of people having the same issues over and over again I wrote up a quick tutorial for debugging client-server communication by using netcat and cURL.
That of course only works for the simplified case that you always 'fake' on side of the connection.
For eavesdropping you can use tools like tcpdump or Wireshark. Which will definitely be easier if you're able to run the server instance directly on your local machine.
Stetho is a great tool from FB which helps in debugging android Apps. You can have access to local data and have a check on your network using this.
http://facebook.github.io/stetho/

Categories

Resources