空白屏幕离子
Blank screen ionic
当 运行 运行我的代码时,出现控制台错误的空白屏幕:
GET http://localhost/templates/home.html 404(未找到)
导致黑屏。
代码是 运行 到 lamp 服务器(本地主机)。
我的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/index.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>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- ngRoute error-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.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="Scripts/jquery-1.11.2.js"></script>
<script src="Scripts/URLDecode.js"></script>
<script src="Scripts/serverInfo.js"></script>
<script src="Scripts/moment.js"></script>
<!-- Location of user for displaying nearby restaurants from database
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>-->
<!--
<script>
localStorage.clear();
</script>
-->
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<script id="templates/home.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="sidebarContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-energized">
<h1 class="title">Testing</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close ng-click="startRanging()">
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/rangemodal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar-energized">
<h1 class="title">Beacon values</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeModal()">Close
</button>
</div>
</ion-header-bar>
<ion-content>
<ion-refresher spinner="lines" on-refresh="refreshData()">
</ion-refresher>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Select Major value
</div>
<select ng-model="selectedBeacon"
ng-options="beacon.major for beacon in data">
<option>--</option>
</select>
</label>
</div>
<ion-list>
<ion-item>Minor: {{selectedBeacon.minor}}</ion-item>
<ion-item>Proximity: {{selectedBeacon.proximity}}</ion-item>
<ion-item>RSSI: {{selectedBeacon.rssi}}</ion-item>
</ion-list>
</ion-content>
</ion-modal-view>
</script>
<script id="templates/tester.html" type="text/ng-template">
<ion-view view-title="tester">
<ion-content>
test
</ion-content>
</ion-view>
</script>
</body>
</html>
在我的 app.js 配置中:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/home.html",
controller: 'TestmenuController'
})
.state('home.tester', {
url: "/tester",
templateUrl: "templates/tester.html",
controller: 'TestController'
});
$urlRouterProvider.otherwise('/tester');
})
Tesmenu控制器:
.controller('TestmenuController', function($scope, $ionicModal, BeaconData) {
$scope.data = BeaconData.getData();
$scope.startRanging = function () {
BeaconData.startRanging();
$scope.data = BeaconData.getData();
};
$scope.refreshData = function () {
//BeaconData.resetData();
$scope.data = BeaconData.getData();
$scope.$broadcast('scroll.refreshComplete');
if($scope.data == '') {
alert('No data available for region:\n01122334-4556-6778-899a-abbccddeeff0');
}
};
$scope.select = function (major) {
alert('click');
$scope.index = data.major.indexOf(major);
alert(index);
};
$ionicModal.fromTemplateUrl('rangemodal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
我的整个app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
ionic.Platform.isReady = true;
angular.module('starter', ['ionic', 'ngCordova', 'ngRoute'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
//StatusBar.styleDefault();
StatusBar.hide();
}
//Put on device's bluetooth
cordova.plugins.locationManager.isBluetoothEnabled()
.then(function(isEnabled) {
if(!isEnabled) {
cordova.plugins.locationManager.enableBluetooth();
}
})
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/home.html",
controller: 'TestmenuController'
})
.state('home.tester', {
url: "/tester",
templateUrl: "templates/tester.html"
});
$urlRouterProvider.otherwise('/tester');
})
.service('BeaconData', function() {
var data = [];
this.startRanging = function () {
var beaconRegion = {
uuid: '01122334-4556-6778-899a-abbccddeeff0',
identifier: '89'
};
var delegate = new cordova.plugins.locationManager.Delegate();
cordova.plugins.locationManager.setDelegate(delegate);
var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(
beaconRegion.identifier, beaconRegion.uuid);
/* Every time startRanging() is called, this section will continue to update every split second
if a beacon is detected for given beaconRegion*/
delegate.didRangeBeaconsInRegion = function (pluginResult) {
var result = JSON.stringify(pluginResult);
var obj = JSON.parse(result);
for(i = 0; i < obj.beacons.length;i++) {
data[i] = obj.beacons[i];
}
};
cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
.fail(console.error)
.done();
};
this.resetData = function () {
data = '';
}
this.getData = function () {
return data;
};
})
.service('Database', function () {
})
/*
.service('GeolocationService', function() {
var geocoder;
this.getLocation = function() {
geocoder = new google.maps.Geocoder();
navigator.geolocation.getCurrentPosition(onGetCurrentPositionSuccess, onGetCurrentPositionError);
var onGetCurrentPositionSuccess = function(position) {
alert("lat: " + position.coords.latitude);
alert("long: " + position.coords.longitude);
var lat = parseFloat(position.coords.latitude);
var lng = parseFloat(position.coords.longitude);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var arrAddress = results[0].address_components;
// iterate through address_component array
$.each(arrAddress, function (i, address_component) {
if (address_component.types[0] == "locality") {
console.log(address_component.long_name); // city
alert(address_component.long_name);
return false; // break
}
});
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
var onGetCurrentPositionError = function(error) {
console.log("Couldn't get geo coords from device");
}
}
})
*/
.controller('CheckAvailabilityController', function($scope, BeaconData) {
})
.controller('StartController', function($scope, BeaconData) {
})
.controller('TestmenuController', function($scope, $ionicModal, BeaconData) {
$scope.data = BeaconData.getData();
$scope.startRanging = function () {
BeaconData.startRanging();
$scope.data = BeaconData.getData();
};
$scope.refreshData = function () {
//BeaconData.resetData();
$scope.data = BeaconData.getData();
$scope.$broadcast('scroll.refreshComplete');
if($scope.data == '') {
alert('No data available for region:\n01122334-4556-6778-899a-abbccddeeff0');
}
};
$scope.select = function (major) {
alert('click');
$scope.index = data.major.indexOf(major);
alert(index);
};
$ionicModal.fromTemplateUrl('rangemodal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
//$scope.$on('modal.hidden', function() {
// Execute action
//});
// Execute action on remove modal
//$scope.$on('modal.removed', function() {
// Execute action
//});
})
Ionic
有自己的服务器来测试您的应用程序。 AFIK,它并非设计用于 运行 作为普通网络 site/server。 运行 作为服务器只是他们提供的用于更快构建应用程序的工具
因此 运行 应用程序,
cd to your app folder
run ionic serve
it should start at localhost:8100
默认
详细了解他们的 getting started
好的让我们看看
这就是您的 html 的样子
<html ng-app="ionicApp">
<head>
//links and stuff
</head>
<body>
<ion-nav-view></ion-nav-view>
<script id="templates/home.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
...
</ion-side-menus>
</script>
<script id="templates/tester.html" type="text/ng-template">
<ion-view view-title="TESTER">
<ion-content>
...
</ion-content>
</ion-view>
</script>
</body>
</html>
这里是Angular部分
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/home.html",
controller: 'TestMenuCtrl'
})
.state('home.tester', {
url: "/tester",
views: {
'menuContent': {
templateUrl: "templates/tester.html",
controller: 'TesterCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home/tester');
})
.controller('TestMenuCtrl', function($scope, $ionicModal, $timeout) {
// Form data for the login modal
$scope.loginData = {};
})
.controller('TesterCtrl', function($scope) {
$scope.oneAndtwo = [
{ title: 'one', id: 1 },
{ title: 'two', id: 2 },
{ title: 'three', id: 3 },
{ title: 'four', id: 4 },
{ title: 'five', id: 5 },
{ title: 'six', id: 6 }
];
});
这是一个工作示例http://jsbin.com/diliru/1/edit?html,js,output
记得在您的终端中执行 ionic serve
,请注意:<ion-nav-view name="menuContent"></ion-nav-view>
应该与您在此处输入的名称相同
.state('home.tester', {
url: "/tester",
views: {
'menuContent': {
templateUrl: "templates/tester.html",
controller: 'TesterCtrl'
}
}
});
记得提及你的依赖关系。
我不知道还有什么。如果我能帮上忙,请告诉我。
你能检查一下你使用的是哪个版本的Cordova吗?
cordova -v
如果版本>4.3,尝试添加白名单插件
ionic plugin add cordova-plugin-whitelist
新的 cordova 会阻止 http 请求,当应用程序尝试发出 http 请求时会出现此错误。
<access origin="*" />
将访问来源添加到您的 config.xml 文件。
这应该可以解决您的问题
当 运行 运行我的代码时,出现控制台错误的空白屏幕:
GET http://localhost/templates/home.html 404(未找到)
导致黑屏。 代码是 运行 到 lamp 服务器(本地主机)。
我的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/index.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>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- ngRoute error-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.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="Scripts/jquery-1.11.2.js"></script>
<script src="Scripts/URLDecode.js"></script>
<script src="Scripts/serverInfo.js"></script>
<script src="Scripts/moment.js"></script>
<!-- Location of user for displaying nearby restaurants from database
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>-->
<!--
<script>
localStorage.clear();
</script>
-->
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<script id="templates/home.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="sidebarContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-energized">
<h1 class="title">Testing</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close ng-click="startRanging()">
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/rangemodal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar-energized">
<h1 class="title">Beacon values</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeModal()">Close
</button>
</div>
</ion-header-bar>
<ion-content>
<ion-refresher spinner="lines" on-refresh="refreshData()">
</ion-refresher>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Select Major value
</div>
<select ng-model="selectedBeacon"
ng-options="beacon.major for beacon in data">
<option>--</option>
</select>
</label>
</div>
<ion-list>
<ion-item>Minor: {{selectedBeacon.minor}}</ion-item>
<ion-item>Proximity: {{selectedBeacon.proximity}}</ion-item>
<ion-item>RSSI: {{selectedBeacon.rssi}}</ion-item>
</ion-list>
</ion-content>
</ion-modal-view>
</script>
<script id="templates/tester.html" type="text/ng-template">
<ion-view view-title="tester">
<ion-content>
test
</ion-content>
</ion-view>
</script>
</body>
</html>
在我的 app.js 配置中:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/home.html",
controller: 'TestmenuController'
})
.state('home.tester', {
url: "/tester",
templateUrl: "templates/tester.html",
controller: 'TestController'
});
$urlRouterProvider.otherwise('/tester');
})
Tesmenu控制器:
.controller('TestmenuController', function($scope, $ionicModal, BeaconData) {
$scope.data = BeaconData.getData();
$scope.startRanging = function () {
BeaconData.startRanging();
$scope.data = BeaconData.getData();
};
$scope.refreshData = function () {
//BeaconData.resetData();
$scope.data = BeaconData.getData();
$scope.$broadcast('scroll.refreshComplete');
if($scope.data == '') {
alert('No data available for region:\n01122334-4556-6778-899a-abbccddeeff0');
}
};
$scope.select = function (major) {
alert('click');
$scope.index = data.major.indexOf(major);
alert(index);
};
$ionicModal.fromTemplateUrl('rangemodal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
我的整个app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
ionic.Platform.isReady = true;
angular.module('starter', ['ionic', 'ngCordova', 'ngRoute'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
//StatusBar.styleDefault();
StatusBar.hide();
}
//Put on device's bluetooth
cordova.plugins.locationManager.isBluetoothEnabled()
.then(function(isEnabled) {
if(!isEnabled) {
cordova.plugins.locationManager.enableBluetooth();
}
})
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/home.html",
controller: 'TestmenuController'
})
.state('home.tester', {
url: "/tester",
templateUrl: "templates/tester.html"
});
$urlRouterProvider.otherwise('/tester');
})
.service('BeaconData', function() {
var data = [];
this.startRanging = function () {
var beaconRegion = {
uuid: '01122334-4556-6778-899a-abbccddeeff0',
identifier: '89'
};
var delegate = new cordova.plugins.locationManager.Delegate();
cordova.plugins.locationManager.setDelegate(delegate);
var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(
beaconRegion.identifier, beaconRegion.uuid);
/* Every time startRanging() is called, this section will continue to update every split second
if a beacon is detected for given beaconRegion*/
delegate.didRangeBeaconsInRegion = function (pluginResult) {
var result = JSON.stringify(pluginResult);
var obj = JSON.parse(result);
for(i = 0; i < obj.beacons.length;i++) {
data[i] = obj.beacons[i];
}
};
cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
.fail(console.error)
.done();
};
this.resetData = function () {
data = '';
}
this.getData = function () {
return data;
};
})
.service('Database', function () {
})
/*
.service('GeolocationService', function() {
var geocoder;
this.getLocation = function() {
geocoder = new google.maps.Geocoder();
navigator.geolocation.getCurrentPosition(onGetCurrentPositionSuccess, onGetCurrentPositionError);
var onGetCurrentPositionSuccess = function(position) {
alert("lat: " + position.coords.latitude);
alert("long: " + position.coords.longitude);
var lat = parseFloat(position.coords.latitude);
var lng = parseFloat(position.coords.longitude);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var arrAddress = results[0].address_components;
// iterate through address_component array
$.each(arrAddress, function (i, address_component) {
if (address_component.types[0] == "locality") {
console.log(address_component.long_name); // city
alert(address_component.long_name);
return false; // break
}
});
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
var onGetCurrentPositionError = function(error) {
console.log("Couldn't get geo coords from device");
}
}
})
*/
.controller('CheckAvailabilityController', function($scope, BeaconData) {
})
.controller('StartController', function($scope, BeaconData) {
})
.controller('TestmenuController', function($scope, $ionicModal, BeaconData) {
$scope.data = BeaconData.getData();
$scope.startRanging = function () {
BeaconData.startRanging();
$scope.data = BeaconData.getData();
};
$scope.refreshData = function () {
//BeaconData.resetData();
$scope.data = BeaconData.getData();
$scope.$broadcast('scroll.refreshComplete');
if($scope.data == '') {
alert('No data available for region:\n01122334-4556-6778-899a-abbccddeeff0');
}
};
$scope.select = function (major) {
alert('click');
$scope.index = data.major.indexOf(major);
alert(index);
};
$ionicModal.fromTemplateUrl('rangemodal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
//$scope.$on('modal.hidden', function() {
// Execute action
//});
// Execute action on remove modal
//$scope.$on('modal.removed', function() {
// Execute action
//});
})
Ionic
有自己的服务器来测试您的应用程序。 AFIK,它并非设计用于 运行 作为普通网络 site/server。 运行 作为服务器只是他们提供的用于更快构建应用程序的工具
因此 运行 应用程序,
cd to your app folder
run ionic serve
it should start at localhost:8100
默认
详细了解他们的 getting started
好的让我们看看
这就是您的 html 的样子
<html ng-app="ionicApp">
<head>
//links and stuff
</head>
<body>
<ion-nav-view></ion-nav-view>
<script id="templates/home.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
...
</ion-side-menus>
</script>
<script id="templates/tester.html" type="text/ng-template">
<ion-view view-title="TESTER">
<ion-content>
...
</ion-content>
</ion-view>
</script>
</body>
</html>
这里是Angular部分
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/home.html",
controller: 'TestMenuCtrl'
})
.state('home.tester', {
url: "/tester",
views: {
'menuContent': {
templateUrl: "templates/tester.html",
controller: 'TesterCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home/tester');
})
.controller('TestMenuCtrl', function($scope, $ionicModal, $timeout) {
// Form data for the login modal
$scope.loginData = {};
})
.controller('TesterCtrl', function($scope) {
$scope.oneAndtwo = [
{ title: 'one', id: 1 },
{ title: 'two', id: 2 },
{ title: 'three', id: 3 },
{ title: 'four', id: 4 },
{ title: 'five', id: 5 },
{ title: 'six', id: 6 }
];
});
这是一个工作示例http://jsbin.com/diliru/1/edit?html,js,output
记得在您的终端中执行 ionic serve
,请注意:<ion-nav-view name="menuContent"></ion-nav-view>
应该与您在此处输入的名称相同
.state('home.tester', {
url: "/tester",
views: {
'menuContent': {
templateUrl: "templates/tester.html",
controller: 'TesterCtrl'
}
}
});
记得提及你的依赖关系。
我不知道还有什么。如果我能帮上忙,请告诉我。
你能检查一下你使用的是哪个版本的Cordova吗?
cordova -v
如果版本>4.3,尝试添加白名单插件
ionic plugin add cordova-plugin-whitelist
新的 cordova 会阻止 http 请求,当应用程序尝试发出 http 请求时会出现此错误。
<access origin="*" />
将访问来源添加到您的 config.xml 文件。
这应该可以解决您的问题