Communicate with local server from a mobile in the same network through a phonegap app

Question

I am trying to create an app which will communicate with the server to store data. The configuration I am trying is the following. Apache server on LAN IP:192.168.1.9:80 Mobile device on random LAN IP: 192.168.1.3 (example)

The app is made using phonegap. I am sending Ajax calls to server to execute a.php file that will talk to MySQL DB and store some user data but cannot make it happen. On the other hand when I try the same app from Chrome (on mobile) the communication is established and the data are stored to the backend DB.

Now, I think I know the problem but I am unable to fix it. The problem I think is that due to security restrictions, phonegap does not allow the execution of code on the server side (and for a good obvious reason). I know I have to insert some <meta> statements on the config.xml of phonegap to allow this communication but everything I try does not seem to work.

Some code: Ajax call:

 $.ajax({
        type: "POST",
        url: "192.168.1.9/mysite/register.php",
        data:{uname:u_user, pass:u_pass,uid:u_uid, email:u_email, fullname:u_fullname, address:u_address, telephone:u_telephone}, 
        crossDomain: true,
        cache: false,
        success: function(d){
        if (d == 'This email is already being used') {
         alert ("The email is already being used. New account with existing email cannot be created.")
         return true;
        }
        alert("Thank you for registering!");
        },
        error: function(e) {
        alert (e)
        alert("An error has occurred. Please contact reseller.")
  }
   });

when I open chrome in developer mode to look for errors I get:

file:///android_asset/www/192.168.1.9/mysite/register.php net::ERR_FILE_NOT_FOUND

which shows that the request is not made on the server but insted the app is looking for a local file in the mobile device.

config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<widget 
xmlns = "https://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.nsbasic.{id}"
versionCode = "{phoneGapBuildCounter}"
version = "{version}">

<name>{title}</name>
<description>{description}</description>
<preference name="phonegap-version" value="{phoneGapVersion}" />

<icon src='{icon}' />
<preference name='SplashScreenDelay' value='2000' />
<preference name='AutoHideSplashScreen' value='true' />
<plugin name='cordova-plugin-splashscreen' source='npm' />

<preference name="permissions" value="none"/>
<!-- sample preference specifications -->
<!-- <preference name="autorotate" value="false" readonly="true"/> -->
<!-- <preference name="orientation" value="default" /> -->
<!-- <preference name="fullscreen" value="true" /> -->

<!-- Platforms: Customize as needed. -->
<gap:platforms>
   <gap:platform name="android" />
   <gap:platform name="ios" />
</gap:platforms>

<plugin name="cordova-plugin-statusbar" source="npm" />
  <preference name="StatusBarOverlaysWebView" value="{phoneGapStatusBarOverlay}" />
  <preference name="StatusBarBackgroundColor" value="{phoneGapStatusBarColor}" />
  <preference name="StatusBarStyle" value="{phoneGapStatusBarStyle}" />

<plugin name="cordova-plugin-whitelist" source="npm" />
  <allow-navigation href="*" />
  <access origin="*" />
  <allow-intent href="*" />
</widget>

I have also added the following for the content security policy:

default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline'; media-src *; img-src * data:;

Any ideas why this is not working?

Best Regards.

Answer 1

Your url is missing the protocol prefix - http://.

$.ajax({
    type: "POST",
    url: "http://192.168.1.9/mysite/register.php",
    etc