PhoneGap cross domain ajax with PhoneGap developer

问题:

When doing ajax cross domain calls with PhoneGap developer app and CLI only GET calls and POST with no data success, POST call with data is not working. If trying local, everything is working fine.

I did set in config.xml access origin="*". Also did set $.support.cors = true; in script.

Here is example I am doing on Hello world app from PhoneGap.

    <script type="text/javascript">
    $(document).bind("ready", function() {
        $.support.cors = true;
        test();
    });
    </script>

    <script>
    function test(){
        $.ajax({
            url:'http://www.url.com',
            type:'POST',
            headers:{
                "Content-Type":'application/x-www-form-urlencoded'
            },
            data:'x=1',
            cache:false,
            success: function (data) {
                alert(data);
            },
            error:function(request, textStatus, errorThrown){
                alert(errorThrown);
            }
        });
        return false;
    }
    </script>

Interesting is that when looking at console, after call, call isn't shown when made, but after a while. Response time is extra long, it take more then 15sec for response, and when finally get response there is no error for ajax. However in console, I get error, Proxy error: url: "entered url" ECONNRESET.

I have tried doing same request trough REST console and there is same effect.

URL of proxy is

http://localhost:3000/proxy/

I haven't made any changes to proxy, and I would like to disable it if possible, but if not, just enable cross domain.

Website to which I am doing cross domain call have enabled cross domain calls, and I have app tested in Ripple and everything is working fine. Also if I build app with PhoneGap build, everything is also working on smarthphone (iOS/iPhone).

Note, If I am testing app with Ripple, only remote proxy works and disabled proxy, local is not working. This maybe indicates local problems but I am new to proxy and PhoneGap.

回答1:

I have found workaround, it's not with phonegap-cli or node.js, but I can use phonegap developer app for testing which is main thing, so I don't have to rebuild app every time.

If you have installed Apache on your computer, you can tell phonegap developer app to listen standard port (80) instead of phonegap-cli :3000 and it will successfully load app. Normally when working with Apache (xampp or wampp), you are using localhost or you maybe create vhost which will not work, you have to find out your local network IP, which is usually 192.168.1.X, where X is number of your computer. That is the same IP phonegap-cli shows to listen, when starting serve.

You can find it on windows by going CMD->ipconfig and there IPv4 Address. Test it by entering http://IP/ in browser URL bar, and it should lead you to root folder of local host, which is same as http://localhost/, if you have installed Apache. In my case, I am using XAMPP (wampp) so it is htdocs in xampp folder.

Now, you should place your app project also in that folder so you can access it simple. If your project is there you should be able to access it by going to http://IP/project-folder/. So you type that path to phonegap developer app and it should work!

Note, if you are using phonegap project structure, you will probably have to add www to end of path I mentioned before, so it will look like http://IP/project-folder/www/. I am not using phonegap standard folder structure and it is working for me.

Also, I am not using much native functions, so I can't tell if it's working 100%. My main goal was to have cross domain calls working, and to be able to test it without rebuilding app for any change.

Extra, shortcuts like 3/4 finger tap will not work as you are not using node.js in this case so there is no feedback to phonegap developer app from computer.

Advice, add somewhere button to reload app when you make changes so that you don't have to quit app every time you do change.

回答2:

I know this thread is quite old (and probably has a lot of duplicates. If so, sorry about that).

I solved this issue by enabling CORS on my local Apache setup. There are a lot of different ways to do this. The way I did it was to add the following to my virtual host config.

Header set Access-Control-Allow-Origin "*"

You are supposed to be able to enable this using the .htaccess as well. Make sure that the mod_headers is enabled too. It's commonly commented out by default in the httpd.conf. Again, there are multiple ways to setup your Apache environment so this may not be the suitable solution for you.

Additionally; I did enable cors in jQuery and added crossDomain to the ajax method data. Don't know if that is really needed though.

回答3:

Agree w Mr Br, I was using Ripple/Chrome emulator and essentialy had to: - disable Ripple proxy / or set to local - enable cors in jquery, two calls (see docs jqm) - enable cors on REST service