AngularJS $http.get reports XMLHttpRequest failure

问题

I'm trying to learn to use $http.get requests in AngularJS for a web app that I am writing. I have a locally hosted server that has some API that I have written. When I try to run my Angular page I can see in my server's console that the GET request has been made however nothing loads in the browser. Upon inspecting the browser's console I find this error message:

XMLHttpRequest cannot load http://127.0.0.1:8080/api/range/?nmax=5&a_max=100&b_max=200, No 'Access-Control-Allow-Origin' header is print on the requested resource. Origin 'null' is therefore not allowed access.

Server-side I am running Python CherryPy server that would take a GET request to the url above and return a JSON string looking something like this:

[
    {
        "a": 5.6,
        "b": 3.2
    },
    {
        "a": 4.3,
        "b": 2.6
    }
]

Here's my Angular code, at the moment it's as basic as possible:

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="Ctrl"> 

<ul>
  <li ng-repeat="x in peakdata">
    {{ x.a + ', ' + x.b }}
  </li>
</ul>

</div>

<script>
var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope, $http) {
  $http.get('http://127.0.0.1:1234/api/range/?nmax=5&a_max=100&b_max=200')
    .then(function(response){
      $scope.peakdata = response.data;
    }, function(err) {
      throw err;
    });
});
</script>

</body>
</html>

Any advice would be much appreciated!

Thanks, Sean.

Edit: Turns out that I had to make amendments to both my AngularJS code and my CherryPy script. See my answer for more details.

回答1:

I believe this previous question may have the answer you're looking for: Origin null is not allowed by Access-Control-Allow-Origin.

It's a problem that occurs when you're doing things locally, so I believe it's not about you not using Angular correctly :)

回答2:

After a little further researching, and fiddling I finally came to a solution. I needed to have CORS enabled my AngularJS app. The following code sufficed:

myApp.config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

In most people's cases, their issues would have ended there. However, since I am running my own CherryPy server I had a little more to do. I had to enable CORS in my CherryPy Python script. These questions/answers here are good resources vis-à-vis doing this:

“no 'Access-Control-Allow-Origin' header is present” error with Cherrypy

cherrypy/jquery CORS trouble

For anyone wondering what "CORS" actually is, it stands for "Cross-Origin Resource Sharing". The Wikipedia page is nice bit of light reading: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

来源：https://stackoverflow.com/questions/32071961/angularjs-http-get-reports-xmlhttprequest-failure

标签

json

angularjs

xmlhttprequest

cherrypy

http-get