0

I updated my Phonegap 4.x App to Phonegap 6.4 and my AJAX functionality broke. I'm always getting a 404.

Of course I stumpled quickly over many other posts.

After spending a few days trying everything I found here and on other sites I decided to create a new project and reconfigure everything in this blank config.xml and only copy the contents of the www/. But even that didn't helped.

An embedded image from the same domain is loading fine, but my AJAX requests (using jQuery) fails.

What am I doing wrong? Did I completely miss something?


Here's my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="..." version="..." xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>...</name>
    <description>
        ...
    </description>
    <author email="..." href="...">
        ...
    </author>
    <content src="index.html" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="14" />
    <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
    <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
    <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
    <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
    <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
    <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
    <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
    <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
    <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
    <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
    <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
    <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
    <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
    <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
    <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
    <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
    <platform name="android">
        <icon density="ldpi" src="www/res/icon/android/icon-ldpi.png" />
        <icon density="mdpi" src="www/res/icon/android/icon-mdpi.png" />
        <icon density="hdpi" src="www/res/icon/android/icon-hdpi.png" />
        <icon density="xhdpi" src="www/res/icon/android/icon-xhdpi.png" />
        <splash density="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
        <splash density="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
        <splash density="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
        <splash density="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
    </platform>
    <access origin="*" />
    <allow-navigation href="https://www.XYZ.de/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <allow-intent href="*" />
        <allow-navigation href="*" />
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
        <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    </platform>
</widget>

jQuery-Code for the AJAX request:

$.ajax( url, {
    dataType: 'jsonp',
    success: function(data) {
        var json = data;
        concerts = [];
        for( var i=0; i<json.events.length; i++ ) {
            var concert = json.events[i];
            concerts.push( concert );
        }
        window.localStorage.removeItem( 'concerts' );
        window.localStorage.setItem( 'concerts', JSON.stringify(concerts) );
        if( concerts.length > 0 || json.events.length == 0 ) {
            hideLoadingAlert();
            concertsLoaded = true;
            if( waitingForConcertData ) {
                if( waitingForConcertData == 'buildConcertList' )
                    buildConcertList();
                if( waitingForConcertData == 'buildFavoritesList' )
                    buildFavoritesList();
            }
        }
        else {
            initConcerts();
            return;
        }
    },
    error: function(xhr) {
        alert(JSON.stringify(xhr));
        alert(url);
        setTimeout("initConcerts()", 5000);
    }
} );
Community
  • 1
  • 1
Robert
  • 431
  • 7
  • 19

1 Answers1

0

Finally I found the "bug":

On Android the WebView / the App / Phonegap seem to be very strict with MIME-Types:

When running my App in Chrome (@Desktop) I found this error in console:

Refused to execute script from 'https://www.XYZ.de/api.php/json/news?callback=jQuery2100273875593823' because its MIME type ('text/json') is not executable, and strict MIME type checking is enabled.

Of course for JSONP the right MIME-Type would be application/javascript as it is wrapped as a JavaScript function.

And yep - now it's working on Android also.

Robert
  • 431
  • 7
  • 19