I'm building a mobile app in React with Ionic and Capacitor.
I'm running a local server with a local API built with Strapi (a headless CMS) that is running on localhost:9000.
I'm having a hell of a time trying to connect my local API to my Ionic app on an Android emulator. The connection works fine on a development server on a web browser. My emulator can also access my local API on a web browser. My app, however, cannot connect to the API when it is running on an emulator.
Here's how I have proceeded so far:
in the .env file of my ionic-react app, I have set the URI to my local API. I have replaced "localhost" with my IP address :
REACT_APP_API_URL = "http://192.168.1.31:9000"
in the gradle.properties file of my app, I have added proxy settings:
systemProp.http.proxyHost=192.168.1.31
systemProp.http.proxyPort=9000
systemProp.https.proxyHost=192.168.1.31
systemProp.https.proxyPort=9000
in the AndroidManifest.xml file of my app, I have added two permissions:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Observations:
(✔️) When I run ionic serve to launch a development server in a browser on my local machine, the HTTP requests execute fine. I can fetch my data.
(❌) When I run the app in Android Studio on an emulator, the HTTP requests fail ("Type Error : fetch failed").
(✔️) Yet, when I open a web browser on the aforementioned emulator and try to access my API on 192.168.1.31:9000/api/games, I get a valid response.
The emulator can access my local API, but my app running on the emulator, cannot. It baffles me. Does anyone have an idea what I'm doing wrong?
I have tried replacing my IP address with 10.0.2.2 in the config files, with no success.
From left to right:
my app in a web browser,
my app on an emulator (with an empty carousel because the HTTP request failed),
a web browser on the emulator trying to access the API and getting a valid response.
Related
I'm trying to create an Android app with Ionic to send messages to a Node.js server. I'm using socket.io#2.3.0 for the server and socket.io-client#2.3.0 for the Ionic app. The Ionic app is supposed to open a socket.io connection with the server, then send the message "Hello, World!". The Ionic app build for the web works properly, I tried running it from other devices (my laptop and my phone) and in both cases the socket.io connection worked and the server printed out the message received from the Ionic app.
// Server output
Server running on port 5000.
New connection from 7rI7qvo9gNjVD5ElAAAA
Hello, World!
But when I build the Ionic app for Android using the commands:
ionic cap add android
ionic cap open android
And then debug from Android Studio, the app launches, but I don't see any message from the server, and I don't even see an error message in the Android Studio debug tab.
// Server output
Server running on port 5000.
At first I thought this was a network problem so I made sure the AndroidManifest.xml file included the permissions INTERNET and ACCESS_NETWORK_STATE, I tried building an APK and running it on my phone, but it still doesn't work so I don't know what I should do.
I'm using the version 5.4.16 of Ionic.
Thanks for reading this, have a nice day :)
I fixed this issue by hosting the Node.js server on Heroku, now everything works fine, I'm not sure why though. Since the protocol changes from http to https when I host the server on Heroku, I'm guessing Android doesn't like the http protocol.
I have created a hybrid mobile app using ionic 2. The app can connect to a Django-powered website on a localhost through Rest API when using "ionic serve" command (using web browser on my end device).
Now, I want to use the app using Bluestacks as emulator. The Django website and the API (running on the localhost) can be accessed through the browser app of the bluestacks. Here were the steps I performed to do this one:
Installed allow-control-allow-origin to enable cross origin information sharing on Google Chrome on my local device.
I have added ALLOWED_HOSTS = ['10.0.2.2'] in my django settings.
Access the django website through Bluestacks' browser using
http://10.0.2.2:8000/
However, the mobile app emulated in Bluestacks could not access the API. Any solution to this problem?
The django conf look's OK.
With this kind of problem, in general, i use tools like :
localtunnel (free)
ngrok
to acces to my localhost from everywhere
example with lt :
$ lt -p 8000 -s andynionic
your url is: https://andynionic.localtunnel.me
You must also add andynionic.localtunnel.me to the Django config
ALLOWED_HOSTS = ['10.0.2.2', 'andynionic.localtunnel.me']
with hibrid, you probably do CORS request, see also cors-django
hope it's help
I'm trying to serve files from a React-Native app. Im using react-native-tcp module but when I create a TCP server it isn't on a nmap output over the mobile device ip address. I've tried with an external client with nodejs but I get ECONNREFUSED. At the same time, If I try with a client inside the react-native app and an external server, I get the same result.
I don't know if there's a protection or the module doesn't work properly. I've also the android.permission.INTERNET in the manifest.
I am currently developing a cordova 4.3 android app in Visual Studio 2015 RC. It's an AngularJS app and I use $resource to send requests to an ASP.NET Web Api application running on a different port on the same computer. Debugging the app in Ripple works fine if I disable the Cross Domain Proxy but when I try to debug in the Visual Studio Android Emulator or on my Android device I get a not very helpful "Failed to load resource" as soon as try to reach the web api. The url looks correct and I suspect the problem has to do with either CORS or my HTTPS certificate or both? What I have tried so far is:
Set <uses-permission android:name="android.permission.INTERNET" /> and android:debuggable="true" in the manifest file.
Tried chrome://inspect/#devices to get more info about the problem but got the error message "Cannot load DevTools frontend from an untrusted origin".
I am able to connect my android phone chrome web browser to the localhost web api using the very helpful tool sharpproxy [https://www.codefromjames.com/wordpress/?p=97] but this approach unfortunately does not work with the app's webview.
The ajax request does work when I point the app to my azure hosted live web api endpoint where I have a valid https certificate but that is not very convenient to use while developing the app.
Made sure the config.xml-file contains <access origin="*" />
My web api is configured with app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll)
I am completely new to cordova/hybrid app development and am surely missing some obvious thing? Any help or suggestion would be very appreciated!!
After having all sort of problems with Visual Studio 2015 I uninstalled it went back to Visual Studio 2013 Update 4 and now I can connect my android device to a local running web api using sharp proxy I mentioned and linked to above.
So to be clear:
Use Visual Studio 2013 Update 4 to run your web api on for example the url https://localhost:44358/.
Start sharp proxy with external port 5000 and internal 44358.
Make sure your android device is connected to the same wifi and instruct your app to use https://your-ip-address:5000 for all service calls.
I trying to deploy an android application connected to GAE. I run the online tutorial on google, I used the right configuration (as they write on the tutorial) but I can't communicate the Android Virtual Device with the web application running locally. The Web application shows me a "Server Error 500" and the android application on AVD shows me a "Failure:Connect to /192.168.56.1:8888 timed out" error.
I m running Eclipse Indigo and the virtual android device is with Google API Level 10.
Thank you.
Appengine dev server by default only accepts connections on localhost address (localhost and 127.0.0.1).
To make it accept connections on all ports add -bindAddress 0.0.0.0 to dev server parameters in Eclipse.