CODEWITHSUNDEEP
angulartypescripthttpionic-frameworkionic4
Dinesh Kumar
Dinesh Kumar

Reputation: 147

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.

Upvotes: 6

Views: 5140

Answers (5)

mhartington
mhartington

Reputation: 7025

Most of these answers, while they can work, are not safe options, since they open up non-https traffic.

cleartext is only meant for local testing with live-reload, and should not be used for production apps.

The real solution would be to use HTTPS endpoints or setup HTTPS on your own server via let's encrypt.

Upvotes: 0

jamesbcn
jamesbcn

Reputation: 347

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

Upvotes: 3

Sampath
Sampath

Reputation: 65860

This works for me on the Ionic 4 app.

enter image description here

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

Upvotes: 2

Najam Us Saqib
Najam Us Saqib

Reputation: 3404

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>

Upvotes: 4

Sampath
Sampath

Reputation: 65860

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);

  });

Upvotes: 2

Related Questions