Ionic 3 Cordova ajax calls fail on Windows 10 (UWP)

Question

I just cannot get my ajax calls to work on an Ionic 3 Cordova application built for a Windows 10 UWP. They can access localhost, but not any outside connections.

The application works fine on both Android and iOS.

I am trying to test this locally on my dev machine. I use a certificate (bought) to sign the application, install this certificate, build the application for Windows, and am able to open up the built CordovaApp.Windows10_1.0.1.1_x86.appxupload, and then double click the embedded CordovaApp.Windows10_1.0.1.1_x86.appx file to install, which completes successfully. The install indicates the app need internet access.

In the config.xml, I have the following tags, as suggested elsewhere...

However, when I run, the http.get call just returns 0 with no other information. I can run in Visual Studio, and look at the returned error object, and get no further info, apart from this 0 return.

I have run fiddler, enabled the https decryption as explained here, but all I see in the response header is

HTTP/1.0 200 Connection Established
FiddlerGateway: Direct
StartTime: 13:44:21.686
Connection: close

The result in the main view actually shows 200, so I don't think this is showing me anything real.

What could I be missing?

Should I be able to use external ajax on a Windows 10 machine, when I have sideloaded the application as here? I haven't tried from the store yet, as I don't want to upload until I know it works.

Update 1

If I run the application on the same machine, just using Ionic serve (so it just runs in the browser rather than hosted in the UWP), the ajax calls also work fine.

Update 2

I have now created a Cordova application using the Visual Studio template, so taking all other frameworks out of the equation.

I used vanilla JavaScript to do my rest call...

 document.addEventListener('deviceready', callUrl, false);

 function callUrl() {
  
  console.log('callUrl'); 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://myserveraddress.com/myapp/testroute');
  xhr.send(null);

  xhr.onreadystatechange = function () {
    var DONE = 4; // readyState 4 means the request is done.
    var OK = 200; // status 200 is a successful return.
    if (xhr.readyState === DONE) {
      if (xhr.status === OK)
        console.log(xhr.responseText); 
    } else {
      console.log('Error: ' + xhr.status); 
    }
  }
 };

I run this in the debugger, and even here I get an error (status code of 0).

Another thing I noticed when I open up the build package and look at the cordova_plugins.js file..

My Ionic app has the following...

cordova.define('cordova/plugin_list', function(require, exports, module) {
    module.exports = [
        {
            "id": "cordova-plugin-console.logger",
            "file": "plugins/cordova-plugin-console/www/logger.js",
            "pluginId": "cordova-plugin-console",
            "clobbers": [
                "cordova.logger"
            ]
        },
        {
            "id": "cordova-plugin-console.console",
            "file": "plugins/cordova-plugin-console/www/console-via-logger.js",
            "pluginId": "cordova-plugin-console",
            "clobbers": [
                "console"
            ]
        },
        {
            "id": "cordova-plugin-device.device",
            "file": "plugins/cordova-plugin-device/www/device.js",
            "pluginId": "cordova-plugin-device",
            "clobbers": [
                "device"
            ]
        },
        {
            "id": "cordova-plugin-device.DeviceProxy",
            "file": "plugins/cordova-plugin-device/src/windows/DeviceProxy.js",
            "pluginId": "cordova-plugin-device",
            "merges": [
                ""
            ]
        },
        {
            "id": "cordova-plugin-splashscreen.SplashScreen",
            "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
            "pluginId": "cordova-plugin-splashscreen",
            "clobbers": [
                "navigator.splashscreen"
            ]
        },
        {
            "id": "cordova-plugin-splashscreen.SplashScreenProxy",
            "file": "plugins/cordova-plugin-splashscreen/www/windows/SplashScreenProxy.js",
            "pluginId": "cordova-plugin-splashscreen",
            "runs": true
        },
        {
            "id": "cordova-plugin-statusbar.statusbar",
            "file": "plugins/cordova-plugin-statusbar/www/statusbar.js",
            "pluginId": "cordova-plugin-statusbar",
            "clobbers": [
                "window.StatusBar"
            ]
        },
        {
            "id": "cordova-plugin-statusbar.StatusBarProxy",
            "file": "plugins/cordova-plugin-statusbar/src/windows/StatusBarProxy.js",
            "pluginId": "cordova-plugin-statusbar",
            "runs": true
        },
        {
            "id": "ionic-plugin-keyboard.KeyboardProxy",
            "file": "plugins/ionic-plugin-keyboard/src/windows/KeyboardProxy.js",
            "pluginId": "ionic-plugin-keyboard",
            "clobbers": [
                "cordova.plugins.Keyboard"
            ],
            "runs": true
        }
    ];
    module.exports.metadata = 
    // TOP OF METADATA
    {
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-splashscreen": "4.0.3",
        "cordova-plugin-statusbar": "2.2.2",
        "cordova-plugin-whitelist": "1.3.1",
        "ionic-plugin-keyboard": "2.2.1"
    };
    // BOTTOM OF METADATA
    });

Now, I notice every plugin in the module.exports.metadata also has an entry in the module.exports except for cordova-plugin-whitelist!

If I open the same file for the Corvoda application created in VS, I see the following...

cordova.define('cordova/plugin_list', function(require, exports, module) {
    module.exports = [];
    module.exports.metadata = 
    // TOP OF METADATA
    {
        "cordova-plugin-whitelist": "1.2.2"
    };
    // BOTTOM OF METADATA
    });

So this has nothing else for the whitelist plugin as well

Could there be something missing here? Could this white-list plugin not be installed correctly?

Ionic 3 Cordova ajax calls fail on Windows 10 (UWP)

Update 1

Update 2

Answers (1)

Related Questions