Question

我正在尝试学习在AngularJS中使用$ http.get请求来创建我正在编写的Web应用程序。我有一个本地托管的服务器，它有一些我写的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.

服务器端我正在运行Python CherryPy服务器，该服务器会向上面的url发送GET请求并返回一个类似于此的JSON字符串：

[
    {
        "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

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

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

在大多数人的案例中，他们的问题将在那里结束。但是，由于我正在运行自己的CherryPy服务器，所以我还有一些工作要做。我必须在我的CherryPy Python脚本中启用CORS。这些问题/答案在这方面是很好的资源：

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

cherrypy/jquery CORS trouble

对于任何想知道“CORS”究竟是什么的人来说，它代表“跨源资源共享”。维基百科页面的阅读材料很简单：https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

AngularJS $ http.get报告XMLHttpRequest失败

2 个答案: