Saturday 20 May 2017

Cordova app ajax call to localhost fails. ::ERR_CONNECTION_REFUSED

I've got an node.js (express) webapp running on localhost:3000. I am now trying to develop a mobile app using cordova.

I've got a route defined in my express app 'localhost:3000/tweets' which when called gets some tweets using twitter API and send them back as json object. Everythinngs works very fine using web app however I am struggling to make the same ajax call from a mobile app. To allow requests from other hosts I've added this to my edxpress app.js:

    app.use(function(req, res, next) {
       res.header('Access-Control-Allow-Origin', "*");
       res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');
       res.header('Access-Control-Allow-Headers', 'Content-Type'); next();
    });

(I'm not sure thats the correct way to allow conenctions from others hots but that seem to work)

In my cordova app:

meta tag:

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

config.xml

    <?xml version='1.0' encoding='utf-8'?>
<widget id="<id...>" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>appname</name>
    <description>
        A twitter search app.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <access origin="*" />
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <engine name="android" spec="^6.2.3" />
    <plugin name="cordova-plugin-camera" spec="^2.4.1" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>

In the index.html file i link 'querySender.js' file at the bottom of body:

    <script type="text/javascript" src="js/querySender.js"></script>

And finally, content of 'querySedner.js'

$(document).ready(function(){

  $('#btn_send').on('click', function(){
    console.log("app is now sending query!");
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:3000/tweets',
        data: {name:"test_name",lastname:"last_name"},
        dataType:'json',
        success: function(dataR){
          var date = new Date();
          console.log("POST success recorded at: ",date.getTime());
          if (!dataR){
          console.log("No Data received");
          }else{
              console.log("DataR: ",dataR);
          }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          console.log("Status: " + textStatus+" error:"+ errorThrown);
        },
        timeout:5000
      });

  });
});

using WebStrom IDE i tried to run index.html in chrome (it runs it on localhost:63342) the request succeeds and data is delivered as expected.

however is emulate the app using android emulator when i press the button i get:

POST http://127.0.0.1:3000/tweets net::ERR_CONNECTION_REFUSED -- jquery-3.2.1.min.js:4

Basically. I'm running my node.js(express) server locally and would like to make ajax calls to it from cordova app on android emulator. What did I get wrong?



via EasternDude

No comments:

Post a Comment