title: Cross-domain requests using PhoneGap and jQuery doesn't work
body: <p>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:</p>
  
  <ul>
  <li>Type of the call must be POST</li>
  <li>The server expects JSON data(at least username and password)</li>
  <li>The server sends back JSON data</li>
  </ul>
  
  <p>The code:</p>
  
  <pre><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
      });
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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:</p>
  
  <ul>
  <li>Use 'jsonp' in stead of 'json'</li>
  <li>Try to use <a href="http://www.html5rocks.com/en/tutorials/cors/" rel="noreferrer">Cross-Origin Resource Sharing (CORS)</a> </li>
  </ul>
  
  <p>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.</p>
  
  <p>In my AndroidManifest.xml file, the option </p>
  
  <pre><code>&lt;uses-permission android:name="android.permission.INTERNET" /&gt;
  </code></pre>
  
  <p>is set.</p>
  
  <p>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?</p>
  
  <p>Thanks in advance!</p>