javascript - Will $.getJSON work with PhoneGap build?

Question

Is anyone able to get this to work in their PhoneGap build? :

$(function(){
    $.getJSON("http://reddit.com/.json", function(data){
        alert("Success!");
    })
})

It works fine in browsers but when I build the app it doesn't run.

I've added these to my config.xml already to whitelist all domains

<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-navigation href="*" />
<access origin="*" />
<allow-intent href="*" />

Also tried building it with this CSP and without

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">

which I got from here: https://github.com/apache/cordova-plugin-whitelist

Answer 1

I took a look at this and replicated your Ajax request in my own PhoneGap Build project.

What I noticed was that the URL you are using http://reddit.com/.json seems to get redirected on Android devices at least to https://www.reddit.com/.json

I discovered this by doing a PhoneGap Build build with debug turned on, running the .apk on a Nexus 7 with Chrome remote debugger tools attached, and seeing this in the JS Console:

"Refused to connect to 'https://www.reddit.com/.json' because it violates the following Content Security Policy..."

I fixed this by amending the Content Security Policy meta tag in index.html to include both https://www.reddit.com and http://reddit.com in the connect-src clause. Rebuilt on PhoneGap Build using this CSP and it works fine on the Nexus 7 now:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://reddit.com https://www.reddit.com">

So my PhoneGap application now looks like this and works:

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {
        var parentElement = document.getElementById('deviceready');
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        $.getJSON('http://reddit.com/.json', function(data){
            alert('Success - got ' + data.data.children.length + ' children in JSON');
        });
    }
};

app.initialize();

For your convenience I put the complete app ready for PhoneGap Build in a Github repo here. Feel free to use this as you need.