PhoneGap Build：AJAX无法正常工作

Question

I've been trying to make a little test app that makes an AJAX call. When I run it using the PhoneGap Desktop server and Android developer app. everything works fine. But when I use PhoneGap Build to compile the app, install the .apk on my phone. the AJAX call fails.

I've read all over to try to find a solution to my problem. seems there are a lot of people having this issue as well, but so far I haven't been able to fix it. The most common thing I see people saying is that it's a whitelist issue. But my config.xml file contains...

<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>

as well as...

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

And my CSP looks like this...

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Which according to Cordova documentation should allow AJAX.

My app is very simple. It has a button which calls my AJAX function and passes it some info to send to the server, and a callback function...

<button onclick="serv('init',ajaxer)">BUTTON</button>

Here is my js file:

function ajaxer(resp){
    var e = document.getElementById("test");
    e.innerHTML="responded...";

    if(resp.go){
        e.innerHTML="IT WORKED!";
    }else{
        e.innerHTML="foo";
    }
}

function serv(request,returnFunc,parameters) { //SEND AND RECEIVE ALL SERVER INFO
    document.getElementById("test").innerHTML="sending info...";    

    var query="";
    var serverObject;
    if(window.XMLHttpRequest){
        serverObject = new XMLHttpRequest();
    }else{
        serverObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    serverObject.goto = returnFunc;

    serverObject.onreadystatechange = function() {
        if(serverObject.readyState==4&&serverObject.status==200){
            var serverResponse = JSON.parse(serverObject.responseText);
            serverObject.goto(serverResponse);
        }
    };

    if(parameters){
        query="&"+parameters;
    }

    serverObject.open("POST", "http://tylermackenzie.duckdns.org/phoneGap%20Test/server.php", true);
    serverObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    serverObject.send('qType='+request+query);
}

When I press the button, it displays the text "sending info..." but never switches it to "responded..." or "IT WORKED!" or "foo". which means that ajaxer() was never called.

I can't understand why it's not working. Like I mentioned earlier. it works great when I use the phoneGap developer app. And I've got my phone wifi turned off while I test it. So I know that the phone is on a different network then the server because the phone has to use the mobile network. If this is just a whitelist issue, shouldn't it have the same problem when I test it with the developer app?

Also, I know it's not a problem with my server because it responds fine when I test on developer app, and when I navigate there manually.

Hoping someone can help me out.

ADDITION

could it have something to do with my file structure that I'm uploading to PhoneGap Build? I just used the "hello world" basic app that the PhoneGap Desktop App creates. And edited the html and js to create a little test app.

It's a little confusing to me because there is an index.html under AppName/www as well as AppName/platforms/browser and under AppName/platforms/browser/www Why are all the files tripled? I tried making all three copies be the same thing. doesn't seem to make any difference.

I read somewhere that I only need to upload the AppName/www folder to PhoneGap Build, and it seems to work just as good as uploading everything else.

Answer 1

Have you tried adding a connect-src section to your Content Security Policy? For example:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src *">

This controls where Ajax requests can be made to, see documentation at content-security-policy.com

Answer 2

I recommend you to use jQuery to make ajax requests it is more manageable and maintainable also it is more easy to make ajax request via jQuery

also you can debug phonegap application and see how ajax request goes and return to server and from server by using weinre remote debugger you can follow steps presented in the following tutorial t make this Weinre Remote Debugging Tutorial

I hope my answer would be useful