current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote -1 down vote favorite

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>

share|improve this question
    
Can you edit with what the current server response is? What is the status code etc... – AdamCooper86 Feb 29 at 22:04
    
Hi, I edited my question and added server response data – Alvin Feb 29 at 22:10
    
Read about CORS. – dfsq Feb 29 at 22:13
    
But if I replace this url to my code: www.w3schools.com/angular/customers.php, it works – Alvin Feb 29 at 22:16
up vote 1 down vote

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

share|improve this answer
    
But if I replace this url to my code: www.w3schools.com/angular/customers.php, it works. – Alvin Feb 29 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 at 22:32
    
Will it work if I can add some header to the response? – Alvin Feb 29 at 22:35
up vote 1 down vote

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.

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.