Http.get() working but not working in build(Release/Debug) in Ionic 4

I am trying get data from a simple api, it works fine in ionic serve(browser) , But when i build the app http call does not work. my Code is

this.http.get("http://example.com/api/routes").subscribe(response => {
 this.routes = response["routes"];
 for (let x in this.routes) {
 let a = this.routes[x].rou_stops;
 let b = a.split(",");
          for (let y in b) {
            this.newCit.push(b[y]);

          }
        }
   });

please help with this issue.

Solution 1:

I am Guessing that your are getting this because of android changes its http architecture.

to make it working on Android go to your project root folder.

yourAppFolder > resources > android > xml > network_security_config.xml Change your network security config to blow code.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

Solution 2:

IONIC 5 UPDATE

I had the same issue in Ionic 5 but made more complicated by the fact that HttpClient was not catching the error (I was simply getting back an unknown failed response).

In order to see that it was indeed a cleartext error I first had to change HttpClient for the Native HTTP plugin.

In Ionic 5 you can now enable cleartext in the capacitor.config.json file or replace the existing json file with a .ts version:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
                 appId: 'com.company.appname',
                 appName: 'My Capacitor App',
                 webDir: 'www',
                 server: {
                           'cleartext': true
                         }
              };

export default config;

docs

Solution 3:

I think you can use Native HTTP plugin for the device use cases:

ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http

usage from the doc:

import { HTTP } from '@ionic-native/http/ngx';

constructor(private http: HTTP) {}

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });

Solution 4:

This works for me on the Ionic 4 app.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>