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:
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:
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!
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.
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!
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With