AngularJS $ http.get报告XMLHttpRequest失败 [英] AngularJS $http.get reports XMLHttpRequest failure
问题描述
我试图学习在AngularJS中为我正在编写的Web应用程序使用$ http.get请求.我有一台本地托管的服务器，该服务器具有我编写的一些API.当我尝试运行Angular页面时，我可以在服务器的控制台中看到已发出GET请求，但是浏览器中没有加载任何内容.检查浏览器的控制台后，我发现以下错误消息:
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.
服务器端，我正在运行Python CherryPy服务器，它将对上面的url进行GET请求并返回一个类似于以下内容的JSON字符串:
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
}
]
这是我的Angular代码，此刻尽可能基本:
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>
任何建议将不胜感激！
谢谢，肖恩.
事实证明，我必须同时修改AngularJS代码和CherryPy脚本.有关更多详细信息，请参见我的答案.
Turns out that I had to make amendments to both my AngularJS code and my CherryPy script. See my answer for more details.
推荐答案
进一步研究和摆弄之后，我终于找到了解决方案.我需要让CORS启用AngularJS应用.以下代码已足够:
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'];
});
在大多数人的情况下，他们的问题到此为止.但是，由于我正在运行自己的CherryPy服务器，因此我还有很多事情要做.我必须在CherryPy Python脚本中启用CORS.这些问题/答案是进行此操作的好资源:
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:
对于任何想知道"CORS"实际上是什么的人，它代表跨源资源共享". Wikipedia页面上的内容很不错: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
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
这篇关于AngularJS $ http.get报告XMLHttpRequest失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
