CODEWITHSUNDEEP
javascriptcordovacors
Creede
Creede

Reputation: 153

Web page can't retrieve data from remote server in Phonegap (but works fine in Chrome)

I am trying to create an Android application using Phonegap 3.1. The app needs to retrieve data from my remote server, which is running Apache with the Header set Access-Control-Allow-Origin "*" directive set for the URI the app should be pulling data from. I have <access subdomains='true' url='*' /> set in Phonegap's config.xml file. The code below works and runs the "success" function if I put the web page into a local Apache directory separate from the server (different machines on different domains in different physical locations) and call it from Chrome, but when I try to call it via Phonegap it throws a less than helpful error of {"readystste":0,"responseText":"","status":0,"statusText":"error"}. The "readystate":0 looks like it might be an access or cross-site scripting error that's only happening in Phonegap, so I'm willing to believe it's something I need to configure on my end, but I'm going nuts trying to figure out what.

Thanks for any help you can provide. I need to get this running and have been scouring the web for a week trying to get it to work.

<!DOCTYPE HTML>
<HTML>
<HEAD>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/affirmation.css">
  <script src="js/jquery-1.10.1.min.js"></script>
  <script>

  $.support.cors = true;

  $(document).ready(function(){

      $.ajax({
        type: 'POST',
        url: 'http://www.remote.server/info/API',
        datatype: 'json',
        data: JSON.stringify(
          { method: 'content',
          params: [
            'text passed to function on server' 
          ],
          id: '1' }
        ),
        success: function(response, textstatus, jqxhr) {
        $('#graf1').text(JSON.stringify(response));
        $('#graf3').text(JSON.stringify(textstatus));
        $('#graf6').text(JSON.stringify(jqxhr));
        },
        error: function(jqxhr, textstatus, errorthrown) {
        $('#graf1').text(JSON.stringify(jqxhr));
        $('#graf3').text(JSON.stringify(textstatus));
        $('#graf6').text(JSON.stringify(errorthrown));
        }

      });          
  });

  </script>

</HEAD>
<BODY>
  <DIV ID="header">JSON Server Test</DIV>
  <DIV ID="content">
  <DIV ID="graf1" CLASS="bodytext"></DIV>
  <DIV ID="graf3" CLASS="bodytext"></DIV>
  <DIV ID="graf6" CLASS="bodytext"></DIV>
</BODY>
</HTML>

Upvotes: 3

Views: 2767

Answers (3)

Arnold Parge
Arnold Parge

Reputation: 6867

I tried everything including <access origin="*" subdomains="true" /> but din't work for me.

then I added 

<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />

In my config.xml and it worked.

Upvotes: 0

MBillau
MBillau

Reputation: 5376

Try putting <access origin="*" subdomains="true" /> inside the www/config.xml file, as per: http://cordova.apache.org/docs/en/3.1.0/guide_appdev_whitelist_index.md.html#Whitelist%20Guide In your question, you have url instead of origin.

Another thing I'm thinking of, are you testing with an emulator? If so, are you using the full URL for the remote server or just localhost? Because localhost on the emulator will map back to the emulator itself and not to the server you are running on your machine.

Upvotes: 7

azBrian
azBrian

Reputation: 668

Did you have the permissions for internet use? PhoneGap Documentation: Connection

Upvotes: 0

Related Questions