Issue reading from my Slim PHP API through Angularjs using ngResource

Question

I've recently completed a Slip PHP API build which interacts beautifully with my Android application. I'm now building a web front-end and for the life of me I can't understand how to request information via GET using ngResource's query function.

My index.html file is:

<!doctype html>
<html ng-app="discussApp">
<head>
</head>
<body>

<div ng-controller="topicsController">
  <div>{{ topics }}</div>
</div>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

My app.js file:

var app = angular.module('discussApp', ['ngResource']);

app.controller("topicsController", function($scope, $resource, $http) {
  var Topics = $resource("http://api.discussorama.com/v1/topics");

  $scope.topics = Topics.query();
});

And the information I'm trying to read (I've successfully done this both from Chrome's Advanced REST Client, the browser, and my Android app) is at http://api.discussorama.com/v1/topics (Note: I've temporarily disabled my authentication middleware in Slim PHP to test with Angularjs). The endpoint returns a json response but I'm not seeing anything in Angular besides "[]". The link to the Angular app is http://hwaelapps.com/discuss/web if anyone would like to see exactly what is happening. Thanks in advance for the help. Note: I've tried several ngResource config options including urlencode but it's still not receiving the data so I stripped all that and all the code is directly as is in the question.

score 0 · Answer 1 · answered Apr 25 '14 at 18:42

The answer was in the console log all along. The error I was receiving was:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

The solution was simply to add

header("Access-Control-Allow-Origin: *");

to my Slim API's index.php file. I guess my shared host isn't configured for CORS.

Issue reading from my Slim PHP API through Angularjs using ngResource

1 Answers1