AngularJS $ http.get报告XMLHttpRequest失败

我正试图学习在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.

服务器端我正在运行，将采取一个GET请求以上网址，并返回一个JSON字符串看起来像这样的Python的CherryPy服务器：

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

这里是我的角码，此刻它尽可能简单：

<!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脚本。查看我的答案了解更多详情。

来源

2015-08-18 Vielbein

一点点进一步研究后，和摆弄我终于来到了一个解决方案。我需要CORS启用我的AngularJS应用程序。以下代码已足够：

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

来源

2015-08-18 12:57:48 Vielbein

我相信这个前面的问题可能有你正在寻找的答案： Origin null is not allowed by Access-Control-Allow-Origin。

它，当你在本地做的事情出现了问题，所以我认为这是不是你没有使用正确的角:)

来源

2015-08-18 12:09:39 VesterDe

虽然这个问题没有回答我的问题，它确实提供了我需要谷歌关键词和术语，我需要的答案，我正在寻找。非常感谢你，我会发布一个答案，详细说明我是如何解决我的问题的。 – Vielbein

AngularJS $ http.get报告XMLHttpRequest失败

回答

相关问题