how to display data from Yii2 framework which is JSON format into IONIC framework (mobile application)?
Question
I am newbie in ionic framework and also Yii2 framework. In Yii2 framework I'm working on RESTful API project which is display data from database into JSON format. This is the result after fetch data into JSON format.
{
"user_id": 1,
"username": "linux",
"nicename": "backtrack"
}
So, what I want to do right now is get some data from JSON format and display at mobile application using ionic framework. I have tried at browser but no data is displayed. At inspect element console I got this error:
XMLHttpRequest cannot load http://localhost/basic/web/index.php/users/1?key1=value&key2=value. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
This is my code at app.js inside myApplication ionic folder:
var App = angular.module('starter',['ionic'])
.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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
});
App.controller('AppCtrl', function($scope, $http){
$scope.getData = function() {
$http.get('http://localhost/basic/web/index.php/users/1', {params: {"key1": "value", "key2": "value"}})
.success(function(data){
$scope.username = data.username;
})
.error(function(data){
alert("ada prob !");
});
}
});
This is my index.html inside myApplication ionic folder:
<!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>Ikrar Potensi</title>
<!--Ionic Libs-->
<link rel='stylesheet' href="lib/ionic/css/ionic.css">
<script src='lib/ionic/js/ionic.bundle.js'></script>
<!--My app-->
<link rel='stylesheet' href='css/style.css'>
<script src='js/app.js'></script>
<script src='cordova.js'></script>
</head>
<body ng-app="starter">
<ion-header-bar class='bar-balanced'>
<h1 class='title'>Ikrar Potensi</h1>
<!--<button class='button' data-ng-click='getData()'>
<i class='icon ion-refresh'></i>
</button>-->
</ion-header-bar>
<ion-content ng-controller='AppCtrl'>
<button class='button' ng-click='getData()'>Do Something</button>
<br>
name: {{username}}
<p>Some text</p>
</ion-content>
</body>
Before I put http://localhost/basic/web/index.php/users/1 at app.js, I try put https://graph.facebook.com/profile-name and run at chrome, the data will be DISPLAYED depend on what I want to display. But, when I put localhost/... error shown at inspect element console.
What is the meaning of the error and how to fix it? I need your help guys.
3 answers
solution1
0 2015-05-10 16:39:32
尝试在您的谷歌浏览器上安装CORS扩展程序
solution2
0 2015-05-10 20:20:31
I have solution based on .htaccess
Try something like that in your web folder:
<IfModule mod_headers.c>
Header Always set Access-Control-Allow-Origin "YOUR_HOST"
Header set Access-Control-Allow-Credentials true
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD"
Header set Access-Control-Allow-Headers "Authorization, Content-Type, Response-Type, If-Modified-Since"
Header set Access-Control-Expose-Headers "Content-disposition, X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count, Link"
</IfModule>
It allows only one host.
solution3
0 2015-05-11 07:15:29
For security reasons, Browsers can not send ajax request to another site. To do this you should use JSONP.
Try this code.
$http.jsonp('http://localhost/basic/web/index.php/users/1?callback=JSON_CALLBACK', {params: {"key1": "value", "key2": "value"}})
.success(function(data){
$scope.username = data.username;
})
.error(function(data){
alert("ada prob !");
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.