LoopBack/Angular/Cordova timing out on Android

Question

We have a web app that's using LoopBack from Strongloop for the API and backend, and Angular on the frontend, with Cordova used to package for mobile. The web app and iOS target from Cordova work great as expected, but when we try to build for an Android device the app server is unreachable from the device. More specifically, after loading the client app and trying to log in, the device makes a POST to my API but never receives a response (and as far as I can tell the request never actually hits the server).

Here's what I've tried so far:

• Make sure that access is set to origin="*" in config.xml
• Make sure that a Content-Security-Policy meta tag is set in my (single-page) app's index.html, allowing remote network
• Make sure that the INTERNET permission is being correctly set in the Android Manifest
• Make sure that the app server is reachable from the device in browser
• Make sure the generated lb-services.js Angular service has the correct API address
• Try generating an Ionic Framework app and dropping my app code into that in case it generates something I need

Since I'm able to get my app running in iOS using Cordova without any issues, I'm thinking there must be something particular to my Android configuration here. I did encounter a separate issue where a plugin that was installed was not compatible with the latest Cordova, but removing that plugin seems to have resolved that. What is different about building for Android that would keep this from working?

EDIT:

I've switched to using Phonegap Build in the hopes that it would be an easier workflow, but I still see the same issues.. Here is the whitelist/CORS configuration that I'm doing:

meta tag in index.html: <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'self' 'unsafe-inline'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'">

config.xml (Phonegap Build, identifiable info removed):

<?xml version="1.0" encoding="UTF-8" ?> <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="..." version="1.0.0"> <name ... /> <description ... /> <author ... /> <icon src="icon.png" /> <gap:splash src="splash.png" /> <preference name='phonegap-version' value='cli-5.1.1' /> <gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" /> </widget>

Answer 1

Install https://github.com/apache/cordova-plugin-whitelist since Cordova 5.0.0 is mandatory for CORS query.

Have you installed it ? If not, this is certainly your issue ;)

Answer 2

It turns out that I was setting <access origin="*" /> in my original Phonegap configuration, but not in my Phonegap Build settings. Making sure that <access origin="*" /> is present in the config.xml used by Phonegap Build seems to fix this.