Cross-domain requests using PhoneGap and jQuery doesn't work

Question

I'm creating a PhoneGap app for Android. To get data from the (remote) server I make a REST call using jQuery's $.ajax() function. There are a few things you must know:

Type of the call must be POST
The server expects JSON data(at least username and password)
The server sends back JSON data

The code:

function makeCall(){
    var url = "http://remote/server/rest/call";

    var jsonData ='{"username":"'+$('#username').val()+'","password":"'+$('#password').val()+'"}';

    $.ajax({
            headers: {"Content-Type":"application/json; charset=UTF-8"},
            type: "POST",
            url: url,
            data: jsonData,
            dataType: "json",
            success: succesFunction,
            error: errorFunction
    });
}

But, this doesn't work. When I use Firebug to see the servers response, there is nothing. With TcpTrace I can see the headers of the request. Instead of an expected POST method, there is an OPTIONS method, with some strange headers added.

OPTIONS /remote/server/rest/call HTTP/1.1
Host: localhost:8081
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: nl,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Origin: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Pragma: no-cache
Cache-Control: no-cache

I know it has something to do with doing cross-domain requests, but I don't know how to solve the problem. I tried a few things to fix it, but with no result:

Use 'jsonp' in stead of 'json'
Try to use Cross-Origin Resource Sharing (CORS)

The problem has also something to do with same origin policy, but this does not apply to the file:// protocol PhoneGap is using to load a local html file.

In my AndroidManifest.xml file, the option

<uses-permission android:name="android.permission.INTERNET" />

is set.

I'm trying to fix this for 2 days now, but no result till now. Is this even possible to do? Do you have any tips for me so I can move on?

Thanks in advance!

score 10 · Answer 1 · answered Apr 16 '12 at 15:49

10

you need to whitelist your external domains. just go to your phonegap / cordova plist file in xcode and add a new entry, have it's value be * and you can access any website out there.

also know that this WILL NOT WORK IN A BROWSER. Browsers have crossdomain issues, not phonegap or mobile devices.

answered Apr 16 '12 at 15:49

Drew Dahlman

4,952
1
22
34

1

Actually... it might work in Safari if you load via `file://`, but Chrome and FF are a no go... – Devgeeks Apr 17 '12 at 06:52
7

you can get it to work in chrome by disabling web security. in Windows Run > `chrome --disable-web-security` In Mac OS `> sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --enable-geolocation` – Peter Apr 17 '12 at 07:09
Thanks for your reactions guys, but it still doesn't work. Still get the errorfunction running when the request is complete. I think it has something to do with the serversettings. I will take a look at it now and keep you up to date! – weerd2 Apr 17 '12 at 08:00

score 8 · Accepted Answer · answered Apr 17 '12 at 10:41

I solved the problem by myself. The problem is located in the url, where I have to add a domain. I changed

var url = "http://remote/server/rest/call";

to

var url = "http://remote.mydomain.com/server/rest/call";

and it works!

I assumed the first url should work because it works on an iphone app with exact the same url and settings. It has also something to do with a double firewall(Windows and ESET firewall) where I shut down the Windows firewall.

Anyway, thanks for your answers!

your problem might be fixed but this is not the answer what solves the cross-domain-request issue — Asqan, Sep 10 '15 at 12:15

score 3 · Answer 3 · answered Jan 20 '16 at 20:57

3

Adding this to the config.xml saved me

<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

I was baffled as to why any outside resource did not load, even google maps and my remote debugging tool. This saved me!

answered Jan 20 '16 at 20:57

Gokigooooks

794
10
20

That was really helpful! – Schiavini Feb 11 '16 at 12:40

score 1 · Answer 4 · answered Apr 16 '12 at 13:11

1

Try setting dataType:jsonp and set crossDomain:true For cross domain ajax requests you can use jsonp. http://api.jquery.com/jQuery.ajax/

Or you can append callback=? to your url.

answered Apr 16 '12 at 13:11

Selvaraj M A

3,096
3
30
46

I already tried what you suggest, but it doesn't work. Still the same problem. Thanks for your answer. – weerd2 Apr 16 '12 at 13:30
2

JSONP doesn't substitute a cross domain POST – contactmatt Jun 03 '13 at 15:17

score 1 · Answer 5 · answered May 03 '13 at 06:29

1

JQuery setting ：$.support.cors = true;

answered May 03 '13 at 06:29

kingnight

720
6
10

Cross-domain requests using PhoneGap and jQuery doesn't work

5 Answers5

Linked