I am creating an ionic app that fetch json value from remote server using $http get. It displays the data when I run it on the browser but not on real Android device. I also have cordova-plugin-whitelist installed already.
Here is my code on the index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
controller.js
.controller('ProductsCtrl', function($scope, $ionicModal, $timeout, $http, $stateParams) {
console.log("ProductCtrl: prod_id = " + $stateParams.prod_id);
$scope.host = "xxxx";
$http.get("http://"+ $scope.host +"/xxxx/xxxx.php?cat_id=" + $stateParams.prod_id)
.then(function(response) {
$scope.products = response.data;
})
.error(function(data, status, headers,config){
console.log('data error');
})
.then(function(result){
things = result.data;
});
})
config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.xxxxxxx" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>XXXX</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="you@example.com" href="http://example.com/">
Your Name Here
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<allow-navigation href="http://xxxx.com/*" />
</widget>
As you can see in index.html I've put the <meta> tag as suggested on other post that I saw here
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
I also tried to uninstall and reinstall the cordova-plugin-whitelist but nothing has changed.
cordova plugin remove cordova-plugin-whitelist
cordova plugin add cordova-plugin-whitelist
These are the errors displayed on the console. Mostly are just 404 like this:
Failed to load resource: net::ERR_NAME_NOT_RESOLVED
But this one is probably because of the <meta> ..
Refused to load the script 'http://localhost:35729/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".
(anonymous function) @ localhost:8100/?ionicplatform=ios:98
Please help.. thanks in advance..
