PhoneGap and different HTTP method requests to a RESTful API

Question

I'm building a mobile app with PhoneGap and I need it to fit into my services RESTful api.

Basically if I want to retrieve/delete/update/check/(nonidempotent action) the resource, issuing a GET/DELETE/PUT/HEAD/POST request via jQuery's ajax method to http://example.com/resource/:id is supported. This is where I'm running into the issue.

Since PhoneGap holds files and serves them locally (e.g: file://file.html), I'll have cross domain issues with the ajax call. Additionally, I understand that JSONP is basically inserting a script into the document, therefore is a solution to one method of request

Here are some ideas:

1. Instead of requesting a data type of JSON or JSONP, could a request for HTML work, then parse the document response into a JSON object?
2. For every request, create and delete an iFrame in page like this poster Using PUT/POST/DELETE with JSONP and jQuery (feels dirty and inelegant)
3. Some form of server-side CORS with Username/Password or Token to be sent with the request to allow this (I'm rolling out on iOS first)
4. Some other tactic that I can't creatively put my finger on.

What's the most elegant solution to this problem? Plugins are welcome.

TL;DR: How do I add cross-domain support on $.ajax requests for different HTTP Methods?

Answer 1

You have to white-list your server in the PhoneGap properties. By default, PhoneGap restricts access to external sites to prevent security issues. PhoneGap does not have cross-domain issues like standard http-hosted sites. Read here for details: http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide