Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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"]}
share|improve this question
How do you access the index.html. From a webserver or as file://? Does you server allow cross orgin requests? – TheHippo May 15 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 May 15 at 19:02
1  
@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 May 15 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 May 15 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 May 15 at 20:07
show 1 more comment

1 Answer

up vote 1 down vote

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).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.