Ionic app could not connect to localhost

Ionic Framework ionic-v3
1

I am working on a project that allows Android Built Ionic version 2 app to create user and authenticate to a Django dev site through Django Rest API.

The authentication works when using ionic serve this was achieved through the use of Cross Origin Resource Sharing (installed as google chrome plugin).

As I’ve tried to run the application on an actual android device, the authentication fails (HTTP 404: URL not found) when using the app but the localhost can be accessed through browser of the same device (through 192.168.22.4:80).

Details:

My current private IP address is 192.168.22.4 and the dev site is currently being served at the localhost port 80 through Wamp Apache Server.

Here is the code fragment of my http request on Ionic App (signup):

let headers = new Headers();
      headers.append('Content-Type','application/json');

      this.http.post("http://192.168.22.4:80/api-user-create", JSON.stringify(this.postData), {headers: headers}).subscribe(res => {
        console.log(res.json());
        this.showAlert();
      }, (err) => {
        console.log(err);
      });

Applied Solutions:

These are the steps that I have tried but still failed to connect to the localhost:

  1. Ensure that the app is allowed to access to WiFi connection, verify whether my IP address is correct, turned off my firewall and even my antivirus. I have also enabled network discovery on my dev server.
  2. Use proxy server (ngrok) and edit Ionic request
  3. Enable CORS on Apache Server and edit Ionic request
  4. Edit Ionic request code. I have tried to changed 192.168.22.4:80 to:
  • 192.168.22.4
  • 127.0.0.1:80
  • 127.0.0.1
  • localhost:80
  • localhost
  • 10.0.2.2
  • 10.0.2.2:80

Has anyone encountered this problem and solved it?

2

problem solved!
I have solved it by:

  1. Make wamp listen to the :. It was initially set to 0.0.0.0:80 by default. To configure, I updated the httpd.conf on my wamp server then added the line:
    Listen 192.168.22.4:80

  2. install cordova-plugin-whitelist on my ionic project. To do this, I have to run:
    cordova plugin add cordova-plugin-whitelist --save

  3. edit my Ionic code and removed the port number to the request:

       let headers = new Headers();
   headers.append('Content-Type','application/json');

   this.http.post("http://192.168.22.4/api-user-create", JSON.stringify(this.postData), {headers: headers}).subscribe(res => {
     console.log(res.json());
     this.showAlert();
   }, (err) => {
     console.log(err);
   });

  4. rebuild and run the application

2 Likes
3

What if we have port number other than 8080 , i mean 7474

4

I am not an expert in networking and I really don’t know if substituting port 80 to 7474 is valid. You can refer to this article if your question meant to ask me the substitute ports for port 80.

Anyways, if the port is valid, the process will just be the same. First, you have to set the Listening port for the Apache. The port should be the port number where you are serving your Django application. Next, install the cordova-plugin-whitelist in your Ionic app and configure the app to post on the IP address of the Django Server.