angularjs, ionic, and json decode using php - php

Question

I'm working with Ionic framework and AngularJS. I want to retrieve data from Mysql and decode to JSON using PHP so that I can use it in my Ionic App.
Here is my PHP code
<?php
/*
Here was my php codes to get all data from mysql and assign it to $episode array
*/
header('Content-Type: text/javascript; charset=utf8');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Max-Age: 3628800');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
echo json_encode($episode);
//close the db connection
mysqli_close($connection);
When I run my App in the browser The console gave me this error
XMLHttpRequest cannot load http://***Here Was My Url***/episodes.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
The code for controller
$scope.posts = [];
var Url = "http://here was my url/episodes.php";
$http.get(Url)
.success(function(response){
console.log("Reveived getPosts via HTTP: ", response, status);
angular.forEach(response, function(child){
$scope.posts.push(child);
});
})
.error(function(response, status){
console.log("Error while received response. " + status + response);
});
But when I run the App in a real device the array gave me this
http://i.imgur.com/lI2ihb9.png
Hope you can help me to solve it.

Answer 1

Add this to your index.php file
// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
}
Alternatively you could also add this to your .htaccess file:
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"