0

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 https://i.stack.imgur.com/b12vC.png

Hope you can help me to solve it.

Kaito-Kaito
  • 1
  • 3

1 Answers1

0

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"
Avantika Saini
  • 792
  • 4
  • 9
  • Still the same problem :( – Kaito-Kaito May 25 '16 at 10:36
  • Try this syntax(add headers), `$http({ method: "Get", url: '...', headers: {'Content-Type': 'application/x-www-form-urlencoded'} }) .success(function(response){ //stuff });` – Avantika Saini May 25 '16 at 10:41
  • Still getting the same problem. I used WP-REST-API i from my wordpress site and it works but when using my own code NOT work. I tried also to generate json file and the problem still the same. – Kaito-Kaito May 25 '16 at 11:07
  • I had a similar problem but it was solved using the above code – Avantika Saini May 25 '16 at 11:24
  • I dont think so. Because the error you are getting indicates that you are making a cross origin request. Refer this [http://stackoverflow.com/questions/9310112/why-am-i-seeing-an-origin-is-not-allowed-by-access-control-allow-origin-error] – Avantika Saini May 25 '16 at 11:36
  • I solved it by uploading my PHP script in another hosting :) – Kaito-Kaito May 25 '16 at 15:52