AngularJS $http.get 报告 XMLHttpRequest 失败

Question

我正在尝试学习在 AngularJS 中为我正在编写的网络应用程序使用 $http.get 请求。我有一个本地托管的服务器，其中包含一些我编写的 API。当我尝试运行我的 Angular 页面时，我可以在服务器的控制台中看到已发出 GET 请求，但浏览器中没有加载任何内容。检查浏览器的控制台后，我发现此错误消息：

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.

服务器端我是运行ning Python CherryPy 服务器，它将向上面的 url 和 return 一个 JSON 字符串发送 GET 请求看起来像这样：

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

这是我的 Angular 代码，目前它尽可能基本：

<!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>

如有任何建议，我们将不胜感激！

谢谢，肖恩。

编辑：原来我不得不对我的 AngularJS 代码和 CherryPy 脚本进行修改。详情请看我的回答。

Answer 1

我相信上一个问题可能有您要找的答案： Origin null is not allowed by Access-Control-Allow-Origin.

这是你在本地做事时出现的问题，所以我相信这不是你没有正确使用Angular:)

Answer 2

经过进一步的研究和摆弄，我终于找到了解决方案。我需要让 CORS 启用我的 AngularJS 应用程序。以下代码就足够了：

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

在大多数情况下，他们的问题到此为止。但是，由于我是运行我自己的 CherryPy 服务器，所以我还有一些事情要做。我必须在我的 CherryPy Python 脚本中启用 CORS。这些 questions/answers 相对于这样做是很好的资源：

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

cherrypy/jquery CORS trouble

对于想知道 "CORS" 到底是什么的人来说，它代表 "Cross-Origin Resource Sharing"。维基百科页面是不错的阅读方式：https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

AngularJS $http.get 报告 XMLHttpRequest 失败

AngularJS $http.get reports XMLHttpRequest failure

json

xmlhttprequest

http-get

cherrypy

angularjs