External api resource not working on android device using http

I’ve started developing my first mobile app (loving the framework so far!). However, I’m facing some issues when it comes to retrieving data from my remote server. Mind you, these issues are NOT occurring when using ionic serve or ionic run android -l, but they do when you do ionic run android or when running in ionic view.

I’ve already added the cordova whitelists to the project by running cordova plugin add cordova-plugin-whitelist

Here’s my controller.js

function search(map) {

    var searchParamenters = ''text=1";

var request = $http({
    method: "post",
    url: "/php/mobileSearch.php",
    data: searchParamenters,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    timeout: 10000
}).success(function( data ) {
    console.log(data.length);
}).
error(function(data, status, headers, config) {
    alert('Error retrieving data from server: '+status);
        $ionicLoading.hide();
    });
};

My ionic.project:

 {
      "name": "RealEstate",
      "app_id": "fb5db279",
      "proxies": [
        {
          "path": "/php/mobileSearch.php",
          "proxyUrl": "http://my.domain.com/php/mobileSearch.php"
        }
      ]
    }

My config.xml includes:

<allow-navigation href="*"/>

http always goes to error and the results of the data object in the error section is 0

Thoguhts? Ideas? Suggestions?

Also add a meta tag in head section.

 <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.googleapis.com http://*.google.com https://*.gstatic.com http://*.gstatic.com ">

Thanks for the reply, but adding

 <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.googleapis.com http://*.google.com https://*.gstatic.com http://*.gstatic.com ">

doesn’t making a difference, still failing…

Did you add your url in meta tag and <access origin="*" subdomains="true"/> in config.xml ?

I just tried it and same results

Still unable to retrieve data from my server from my device (however it works perfectly on browser).

I’ve updated my index.html to include:

<meta http-equiv="Content-Security-Policy" content="default-src *;
               script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos;
                           127.0.0.1:*
                           http://localhost:*
                           http://*.gstatic.com
                           https://*.googleapis.com
                           https://*.gstatic.com
                           https://*.googleapis.com
                           http://www.mydomain.ca
                           ;
               style-src  &apos;self&apos; &apos;unsafe-inline&apos;
                           127.0.0.1
                           http://localhost:*
                           http://*.gstatic.com
                           https://*.googleapis.com
                           https://*.gstatic.com
                           https://*.googleapis.com
                           http://www.mydomain.ca
        ">

and you added the whitelist plugin to your project?

That’s correct @bengtler

Very frustrating. I have the same exact problem. The app works great in ionic serve, the ios simulator, android emulator, and my iPhone, but does not work at all on HTC M9 or any other Android device. I updated cordova and installed the most recent whitelist plugin. I added

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

at the top of my index file and have

<access origin="*"/>

in my config.xml file. Any other ideas out there?

Glad to know I’m not the only one!! But it sucks this is not getting enough attention :frowning:

I found an answer elsewhere to add:

<allow-navigation href="http://*/*" />

Worked for me.

Thanks Swade, but that did not solve my problem :frowning:

I’m having the exact same issue ever since I updated cordova to latest version. Used to work fine before. My thread: External api resource not working on android device using http

Guys I solved it by having these permissions in AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

It might help some of you :slight_smile:

3 Likes

I was able to resolve the issue by NOT using proxies in the ionic.project file as recommended by Ioninc, instead I call the resource using the full URL in my controller.

1 Like

I have the same problem in Android (IOS is working), but I use ngResource with absolute url. I tried all the possibilities discussed above without good results.

some idea or suggestion?

Worked for me. Thanks!

Open “resources/android/xml/network_security_config.xml” and update your domain instead of localhost