Ionic mobile app $http fails to connect. But in browser it works fine


#1

I am able to get the $scope.testResult = “Success: [” + response +"]"; only to happen when testing through browser. when I use “ionic run android” the .get fails in the app. I have also emailed myself the apk located in ‘platforms\android\build\outputs\apk’ and manually installed it on the phone and it still will not work. I have tried every fix I have found on the internet and none of them have worked.

controller:

.controller('bookCtrl', function($scope, $http) {
   $scope.testPHP = function(){
     $http.get('http://foo.com/php/test.php').then(function(response){
         console.log(response);
         $scope.testResult = "Success: [" + response +"]";
      },function(response){
         console.log(response);
         $scope.testResult = "Failed: [" + response + "]";
     });
   }

})

PHP file located at the http://foo.com/php/test.php

<?php

        header('Access-Control-Allow-Origin: *');

        echo "testing";

?>

Template html:

<ion-view title="Book" id="page2">
    <ion-content overflow-scroll="true" padding="true" class="has-header">
        <h1 id="book-heading3" style="color:#000000;text-align:center;">Order the Book</h1>
        <div class="spacer" style="width: 283px; height: 41px;"></div>
        <button ng-click="testPHP()" class="button button-assertive button-full icon-left ion-ios-pulse-strong">PHP Test Button</button>
        <p>PHP Test Result: {{testResult}}</p>
    </ion-content>
    
</ion-view>

Config.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.xxx" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>foobar</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="you@example.com" href="http://example.com.com/">
      Your Name Here
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  <platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
</widget>

#2

Hello!

I think you are looking for whitelist plugin: Ionic run android works BUT apk does not access internet.

If it does not help, then look into whole topic: Ionic run android works BUT apk does not access internet


#3

WOW! thank you!! I was confused because the white list was included by default. adding

<!-- A wildcard can be used to whitelist the entire network,
     over HTTP and HTTPS.
     *NOT RECOMMENDED* -->
<allow-navigation href="*" />  

to my config.xml in my root folder fixed it. I was stuck on this for hours. Thanks!