Ionic2 and 3 Geolocation Error: Only secure origins are allowed, Error getting location and not working on device - ionic-framework

Question

Okay, Here is what happened, i have tried so many times to get geolocation working on an android device but nothing is happening instead it shows a white screen. I decided to test with an emulator by running ionic cordova run android -l -c then i discovered that it throws an exception Only secure origins are allowed. Then i tried using a solution i got from someone (platform.ready().then(() => { ) before calling geolocation getcurrentPosition, I built the app for android and tested, it still shows a white screen. I ran with emulator and the exception changed to console log: Error getting location , I really need help, please anyone.
I run ionic 3.4.0 with npm 5.0.3 on Node.js 7.8.0
Home.ts
getMapLocation() {
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 5000
};
/* Ensure the platform is ready */
this.platform.ready().then(() => {
console.log("platfrom is ready");
/* Perform initial geolocation */
this.geolocation.getCurrentPosition(options).then((position) => {
console.log(position.coords.latitude)
this.Latitude = position.coords.latitude;
this.Longitude = position.coords.longitude;
var pos = {
lat: this.Latitude,
lng: this.Longitude
};
this.location = pos;
this.getMap(this.Latitude, this.Longitude);
}).catch((err) => {
console.log('Error getting location', err);
});
})
}
Config.Xml
<universal-links>
<host name="tgp38.app.goo.gl" scheme="https" />
<host name="taxi-59a68.firebaseapp.com" scheme="https">
<path url="/__/auth/callback" />
</host>
</universal-links>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<allow-navigation href="http://192.168.8.101:8100" />
<allow-navigation href="http://192.168.8.103:8100" />
<allow-navigation href="http://192.168.8.102:8100" />
<engine name="android" spec="^6.2.3" />
<plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
<plugin name="cordova-plugin-buildinfo" spec="^1.1.0" />
<plugin name="cordova-plugin-compat" spec="^1.0.0" />
<plugin name="cordova-plugin-device" spec="^1.1.6" />
<plugin name="cordova-plugin-geolocation" spec="^2.4.3" />
<plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
<plugin name="cordova-plugin-network-information" spec="^1.3.3" />
<plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
<plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
<plugin name="cordova-plugin-stripe" spec="^1.4.1" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
<plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
<plugin name="cordova.plugins.diagnostic" spec="^3.6.5" />
<plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
AndroidManifest.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.playheavens.taxihub" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<application android:hardwareAccelerated="true" android:icon="#mipmap/icon" android:label="#string/app_name" android:supportsRtl="true">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="#string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="#android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
<intent-filter android:label="#string/launcher_name">
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:host="tgp38.app.goo.gl" android:scheme="https"/>
</intent-filter>
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:host="taxi-59a68.firebaseapp.com" android:scheme="https" android:path="/__/auth/callback"/>
</intent-filter>
</activity>
<receiver android:name="cordova.plugins.Diagnostic$LocationProviderChangedReceiver">
<intent-filter>
<action android:name="android.location.PROVIDERS_CHANGED"/>
</intent-filter>
</receiver>
<receiver android:name="cordova.plugins.Diagnostic$NFCStateChangedReceiver">
<intent-filter>
<action android:name="android.nfc.action.ADAPTER_STATE_CHANGED"/>
</intent-filter>
</receiver>
</application>
<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="25"/>
<uses-feature android:name="android.hardware.location.gps"/>
</manifest>

Answer 1

There is problem with 'livereload'. Google's new security rules are now only allowing https ports.
So, if you are running in the browser try using https://localhost:8100. and if you are running in device run it without livereload option.

Answer 2

Try again using this plugin in your browser.
It allows to you request any site with ajax from any source, no matter http/https discrepancies and the like. Practically adds the Allow-Control-Allow-Origin: * header in the response.
Please keep in mind that this is a band-aid solution for development only. It is your server actually that has to be configured to respond with the 'Access-Control-Allow-Origin': '*' header, preferably with a more specific value than *.

Answer 3

To expand on Shreenil's answer, this can be caused by running on an Android emulator with the --livereload option as well as the -lc option.
tl;dr
Remove --livereload and -lc options