Getting JSON from URL in AngularJS?

Question

I have a node.js server providing the AngularJS app on port 8000, and a Python server exposing data over HTTP as JSON on port 80.

Loading in my browser http://localhost:8000/app/List.html renders a blank page. Why?

Controllers.js

function FooListCtrl($scope, $http) {
    $http.get('localhost/foo/list').success(function (data) {
        $scope.foo_lists = data;
    });
}

FooListCtrl.$inject = ['$scope', '$http'];

List.html

<!doctype html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <script src="lib/angular/angular.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body ng-controller="FooListCtrl">
        <code>{{foo_lists | json}}</code>
    </body>
</html>

curl -X GET localhost/foo/list -i

HTTP/1.0 200 OK
Date: Wed, 15 May 2013 18:28:49 GMT
Server: WSGIServer/0.1 Python/2.7.4
Content-Length: 30
Content-Type: application/json

{"Foo": ["bar", "can", "haz"]}

How do you access the index.html. From a webserver or as file://? Does you server allow cross orgin requests? — TheHippo
– TheHippo, Commented May 15, 2013 at 18:57
@TheHippo OP included the URL he's using and mentions he's loading in a browser. The XHR does not include the http:// scheme but should still work. Did you try using $scope.$apply() inside the success() callback? I thought the $http service handled that but maybe not. — jkoreska
– jkoreska, Commented May 15, 2013 at 19:02
@jkoreska You're right. But he also mentions the html is coming from port 8000 and the JSOn from port 80, so it looks like it is still a cross orgin issue. — TheHippo
– TheHippo, Commented May 15, 2013 at 19:04
Oh, so I need to serve the JSON from the same server+port as the static/client-side content? - That's odd. How would I consume third-party APIs then? — Foo Stack
– Foo Stack, Commented May 15, 2013 at 19:08
@TheHippo You, sir, are also right! FooStack - by default your browser will only make requests to the origin scheme/host/port - see en.wikipedia.org/wiki/Same_origin_policy — jkoreska
– jkoreska, Commented May 15, 2013 at 20:07

Justin L. · Accepted Answer · 2013-05-15 20:36:35Z

1

The problem is most likely, as others have mentioned, a cross-origin issue. It's not only about using the same domain, but also the same port. To bypass this, you can either use JSONP, which is a very easy solution designed for this very purpose or use the Cross Site Request Forgery (XSRF) Protection, which uses cookie validation and other measures to ensure security while providing get and post functionality (this is not the easiest solution).

answered May 15, 2013 at 20:36

Justin L.

1,2761 gold badge8 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting JSON from URL in AngularJS?

Controllers.js

List.html

curl -X GET localhost/foo/list -i

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Controllers.js

List.html

curl -X GET localhost/foo/list -i

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related