Fail to get json url in AngularJS

Question

I write a REST API and the api works fine in browser. But I can not get data from it in AngularJS. My code are as below.

This is what the server response in browser:

[{"id":1,"title":"aaa","content":null},{"id":2,"title":null,"content":null},{"id":3,"title":null,"content":null},{"id":4,"title":null,"content":null},{"id":5,"title":null,"content":null},{"id":6,"title":null,"content":null},{"id":7,"title":null,"content":null},{"id":8,"title":null,"content":null},{"id":9,"title":null,"content":null},{"id":10,"title":null,"content":null},{"id":11,"title":null,"content":null},{"id":12,"title":null,"content":null},{"id":13,"title":null,"content":null}]

Fellow up: Thanks all of you guys, now I know there is a cross domain problem here. But I am not sure why I can still get it from chrome? Will that work if I can add some header to the response on server side?

angular.module('job',[])
    .controller('BlogController',['$http',function($http){
        this.LoadDate = function(){
            $http.get("http://alvin-api.herokuapp.com/application/skills")
                .success(function(response) {
                    alert("success");
                }).error(function(response){
                alert("error");
            });
        };
    
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="job">
  {{1+3}}
  <div ng-controller="BlogController as b">
    <input type='button' value = 'click me' ng-click="b.LoadDate()"/>
    
    </div>
  
  </div>

Can you edit with what the current server response is? What is the status code etc... — AdamCooper86, Feb 29 '16 at 22:04
But if I replace this url to my code: www.w3schools.com/angular/customers.php, it works — SmartFingers, Feb 29 '16 at 22:16

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

When you open the developer tools of your browser (I presume Chrome), you can see that XMLHttpRequest cannot load your url.

It seems to be a problem with Heroku.

AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource

edited May 23 '17 at 11:59

Community

1
1

answered Feb 29 '16 at 22:14

JanS

2,065
3
27
29

But if I replace this url to my code: www.w3schools.com/angular/customers.php, it works. – SmartFingers Feb 29 '16 at 22:15
Yes, as the top answer in the linked SO thread says, it's a problem on the server side. So, while Heroku seems to have a problem with it, w3schools seems to handle it 'correctly' – JanS Feb 29 '16 at 22:32
Will it work if I can add some header to the response? – SmartFingers Feb 29 '16 at 22:35

score 1 · Answer 2 · answered Feb 29 '16 at 22:16

The request code is working although using the success and error methods is deprecated, you should use 'then' instead.

This is what the code would look like using the then method:

angular.module('job',[])
    .controller('BlogController',['$http',function($http){
        this.LoadDate = function(){
            $http.get("http://alvin-api.herokuapp.com/application/skills")
                 .then(function successCallback(response) {
                   alert("success");
                 }, function errorCallback(response) {
                   alert("error");
                 });
        };
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="job">
  {{1+3}}
  <div ng-controller="BlogController as b">
    <input type='button' value = 'click me' ng-click="b.LoadDate()"/>
    
    </div>
  
  </div>

When I try to run the snippet though I am seeing an error returned which is blocking the request:

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

Fail to get json url in AngularJS

2 Answers2