Phonegap AJAX URL shows Status 404 on android device

Question

I am new in Phonegap/Cordova . I am facing a problem for 2 days that I cannot able to call AJAX (URL) on my mobile device. I have tried every thing, read every forum but nothing works. On mobile it always show me ' Status 404 '. It works perfectly on Ripple Emulator. Even I use promise.js as I read on many forums. Below is the code snippet:

 var app = {
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {

    $(document).ready(function () {
        var pageData;

        $('#test-form').submit(function(event) {
            event.preventDefault();
            var formVal1 = $('#formVal1').val().trim();
            var formVal2 = $('#formVal2').val().trim();

            if (formVal1 != '' && formVal2 != '')    {
                // B-> Here you define its functions and its payload
                var mdnAPI = 'https://developer.mozilla.org/en-US/search.json';
                /*var payload = {
                    'formVal1' : formVal1,
                    'formVal2' : formVal2
                };*/
                var payload = {
                    'topic' : 'js',
                    'q'     : 'Promise'
                }

                var callback = {
                    success : function(data) {
                    console.log(1, 'success', JSON.parse(data));
                    /* $.mobile.changePage("#application-status", {
                        respData: JSON.parse(data),
                        transition: "flip"
                     }); */
                  },
                  error : function(data) {
                     console.log(2, 'error', JSON.parse(data));
                  }
                };

                $.support.cors=true;
                // Executes the method call
                $http(mdnAPI)
                    .post(payload)
                    .then(callback.success)
                    .catch(callback.error);
            }
            return false;       //this is must
        });
    }
  }

AndroidManifest.xml :

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="com.project.sample.buildingpermit" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<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" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
        <intent-filter android:label="@string/launcher_name">
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="22" />

Config.xml :

  <access origin="*" />
  <access origin="https://developer.mozilla.org/en-US/search.json" />

index.html :

    <script src="cordova.js"></script>
    <script src="js/index.js"></script>
    <script>
        $(document).bind( "mobileinit", function() {
        // Make your jQuery Mobile framework configuration changes here!
        alert('I am here ');
        $.mobile.allowCrossDomainPages = true;
        });
    </script>
    <script type="text/javascript">
        $.support.cors=true;
        app.initialize();
    </script>

Note: I Execute commands:

1) cordova platform version android shows: Installed platforms: android 4.0.2

2) phonegap -v shows: 5.0.0-0.28.1

Can any one provide me the solution I am stuck with this problem for last 2 days? I also turned on the Mobile Internet on my android device but nothing works. First, i use my local network IP in URL now, I deployed on Internet but still not works. Any help is appreciated.

Answer 1

After strenuous effort of 2 days and with the help of @QuickFix who continuously responded above, the issue has been solved.

Fix:

• Remove 'cordova-plugin-whitelist' plugin.

• Add 'cordova-plugin-legacy-whitelist' plugin.