Ionic PHP connection in Android APK

Issue

For a school project we are working on an app with the Ionic framework that needs to connect to an external PHP file. When the user submits a form, the input has to go to the PHP file, get dropped in a database, and also return a value in the app.

We've got everything working locally, as well as in the Ionic View app. But once I make an APK file and install it on Android, the connection doesn't work anymore and no data is being handled in the external PHP file.

For the Javascript we've got the following code:

.controller('AppCtrl', function($scope, $http) {
$scope.data = {};

$scope.submit = function(){
    var link = 'http://examplelink.nl/example/example.php';

    $http.post(link, {username : $scope.data.username}).then(function (res){
        $scope.response = res.data;
    });
};
});

The HTML looks like this:

            <form ng-submit="submit()">
                <label class="item item-input item-stacked-label">
                    <span class="input-label">Username</span>
                    <input type="text" name="username" placeholder="enter username" ng-model="data.username">
                </label>

                <input class="button button-block button-positive" type="submit" name="submit" value="Submit to server">                    
            </form>

            <div class="card">
                <div class="item item-text-wrap">
                    Response: <b ng-bind="response"></b>
                </div>
            </div>

And this is the external PHP:

if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
}

$postdata = file_get_contents("php://input");
if (isset($postdata)) {
    $request = json_decode($postdata);
    $username = $request->username;


    if ($username != "") {

        mysql_connect("examplelink.com.mysql", "example_user", "example_password")or die("cannot connect to server"); 
        mysql_select_db("example_database")or die("cannot select DB");
        mysql_query("INSERT INTO users (`username`) VALUES ('$username')");


        echo "Server returns: " . $username;
    }
    else {
        echo "Empty username parameter!";
    }
}
else {
    echo "Not called properly with username parameter!";
}

Not sure if this is relevant, but these are the permissions we're using in the AndroidManifest.xml:

<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" />

Like I said, it all works fine while testing it both locally and in the Ionic View app. Any ideas?

Solution

Okay, it was a lot easier than I thought. I forgot to add the Cordova Whitelist plugin, that was all!

http://docs.ionic.io/docs/cordova-whitelist

Answered By - Rogier Wijnands