11

Cross-domain AJAX POST request works perfectly fine on web browsers including browsers on mobile phones, but doesn't work for native applications built using Phonegap

I have created a login form that users have to enter their login credentials, then they are verified by the server that is hosted on heroku and returns json {"success":true} if valid credentials are entered.

My Ajax script:

$.ajax({
   type: "POST",
   url: "http://domain.com/public/auth/app-login",
   contentType: "application/x-www-form-urlencoded; charset=utf-8",
   dataType: "json",
   data: {identity: <username from form>, password: <password from form>},
   crossDomain: true,
   cache: false,
   success: function(data) {
       obj = JSON.parse(data);
       if (obj && obj.success === true) {
          window.location.href = 'home.html';
       }
   },
   error: function(e) {
       alert('Error: ' + e.message);
   }
});

Steps taken to resolve this issue:

<access origin="http://domain.com/public/auth/app-login" />

<access origin="*" />

  • Telling jQuery to allow cross-domain

$.support.cors = true; OR jQuery.support.cors = true;

  • Disable caching cache: false

Any help is appreciated.

h4kl0rd
  • 625
  • 1
  • 10
  • 23
  • Hi, Could you resolve this issue? Can you pls share the solution? – Priya Kathir Nov 29 '13 at 09:26
  • 1
    Yes I did resolve it. Try the following: 1. Domain whitelisting (http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide), 2. use XmlHttpReqquest to communicate with your server - see http://stackoverflow.com/questions/9464563/how-do-i-call-remote-api-using-phonegap-for-android – h4kl0rd Nov 30 '13 at 10:08

4 Answers4

7

Ok. If index.html in local then you can call ajax any hosts, not need enable CORS in client or server. You remove:

$.support.cors = true; OR jQuery.support.cors = true;

And:

<access origin="http://domain.com/public/auth/app-login" />

It redundant, only use:

<access origin="*" />

You need check and add in AndroidManifest.xml: 

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

Add more permission if your app required. Finally, call ajax inside $(document).ready(): 

$.ajax({
   type: "POST",
   url: "http://domain.com/public/auth/app-login",
   dataType: "json",
   data: {identity: <username from form>, password: <password from form>},
   success: function(data) {
     obj = JSON.parse(data);
     if (obj && obj.success === true) {
        window.location.href = 'home.html';
     }
   },
   error: function(e) {
     alert('Error: ' + e.message);
   }
});
Hanh Le
  • 894
  • 6
  • 14
  • 1
    please read what I have written. The server has no issues since it works perfectly fine on web browsers, also on browsers in mobile phones. – h4kl0rd Sep 26 '13 at 12:27
  • Ok. I understand that. Did you load index.html(your app) from local app or remote server. If you load from remote server then it will has same problem above. Can you post detail error from server: Access-Control-Allow-Origin not allowed or ... – Hanh Le Sep 27 '13 at 01:29
  • When I run the application natively on android, after entering the correct login credentials, it throws an `error: undefined` from my ajax error command. I don't why this shows. – h4kl0rd Sep 27 '13 at 07:19
  • Sorry. what kind of app you develop(Phonegap android or android native). If (Phonegap) your app load index.html from local(inside www folder) or from remote server(supper.loadUrl("http://...")). Can you post code of your server. – Hanh Le Sep 27 '13 at 08:59
  • 1
    I'm developing a phonegap app that I build with eclipse and run it natively on android phone. I have an `assets` directory which has `www` and I'm calling the `index.html`, so it is local. – h4kl0rd Sep 27 '13 at 09:43
4

If you are looking to resolve this issue then you may wish to make sure that the plugin is being properly included into the build process.

RESOURCE: \app\config.xml
<widget>
    .... [lots of stuff] ....
    <gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" />
    <access origin="http://*" />
    ....
</widget>

You may also wish to specify a version as that is recommended, and I do not specify one above. A good way to test if the plugin is included is to use the free cloud account provided at, https://build.phonegap.com/apps. If you build your project there you can check the plugins tab and make sure that the whitelist plugin is included.

I have read that you should only need this in the HEAD element of your HTML page, but I found as of the date of this post that I still needed to include the plugin.

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

If the plugin is not loaded you might get a "Not Found" error when using the $.ajax method for jQuery for the error string.

Some of the information on the Internet will tell you that the whitelist information is placed into the /www/res/ folder, but this appears to be outdated information. You may also find that <plugin... is used in some examples, but it appears that this may be an obsolete way?

Also, you may need:

RESOURCE: \app\config.xml
<widget>
     ...
     <feature name="http://api.phonegap.com/1.0/network"/>
     ...
</widget>
kmcguire
  • 874
  • 10
  • 12
1

use

JSON.stringify(data: {identity: <username from form>, password: <password from form>})

instead of data: {identity: <username from form>, password: <password from form>}

I got success message when i changed my code like this.

Sonia John Kavery
  • 2,099
  • 2
  • 20
  • 36
-1

Some time there is issue in your domain. In my case I resolved it by putting following code in my .htaccess file

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
Kamesh Jungi
  • 6,203
  • 6
  • 39
  • 50