json Angularjs 问题 $http.get 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15542278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs issue $http.get not working
提问by SL101
I am a novice to Angularjs and tried to follow example given for $http.get on angularjs website documentation.
我是 Angularjs 的新手，并尝试遵循 angularjs 网站文档中为 $http.get 给出的示例。
I have a REST service, which when invoked returns data as follows:
我有一个 REST 服务，它在调用时返回如下数据：
http://abc.com:8080/Files/REST/v1/list?&filter=FILE
{
"files": [
{
"filename": "a.json",
"type": "json",
"uploaded_ts": "20130321"
},
{
"filename": "b.xml",
"type": "xml",
"uploaded_ts": "20130321"
}
],
"num_files": 2}
Part of the contents of my index.html file looks like as follows:
我的 index.html 文件的部分内容如下所示：
<div class="span6" ng-controller="FetchCtrl">
<form class="form-horizontal">
<button class="btn btn-success btn-large" ng-click="fetch()">Search</button>
</form>
<h2>File Names</h2>
<pre>http status code: {{status}}</pre>
<div ng-repeat="file in data.files">
<pre>Filename: {{file.filename}}</pre>
</div>
And my js file looks as follows:
我的 js 文件如下所示：
function FetchCtrl($scope, $http, $templateCache) {
$scope.method = 'GET'; $scope.url = 'http://abc.com:8080/Files/REST/v1/list?&filter=FILE';
$scope.fetch = function() {
$scope.code = null;
$scope.response = null;
$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
}).
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
}
But when I run this, I do not see any result for filenames and I see http status code = 0
但是当我运行它时，我没有看到文件名的任何结果，我看到 http 状态代码 = 0
When I run ,
当我跑步时，
http://abc.com:8080/Files/REST/v1/list?&filter=FILE在浏览器中，我仍然可以看到所需的结果（如上所述）
I even tried to debug using Firebug in firefox, I see the above URL gets invoked when I hit "Search" button but response looks to be empty. And interestingly in Firebug under URL, it shows
我什至尝试在 Firefox 中使用 Firebug 进行调试，当我点击“搜索”按钮时，我看到上面的 URL 被调用，但响应看起来是空的。有趣的是，在 URL 下的 Firebug 中，它显示
OPTIONS "Above URL"
instead of
代替
GET "Above URL"
Can you please let me know, what I am doing wrong and why I am not able to access JSON data ?
您能否告诉我，我做错了什么以及为什么我无法访问 JSON 数据？
Thanks,
谢谢，
回答by Aziz Shaikh
This is because how angular treats CORS requests (Cross-site HTTP requests). Angular adds some extra HTTP headers by default which is why your are seeing OPTIONSrequest instead of GET. Try removing X-Requested-WithHTTP header by adding this line of code:
这是因为 angular 如何处理 CORS 请求（跨站 HTTP 请求）。默认情况下，Angular 添加了一些额外的 HTTP 标头，这就是为什么您看到的是OPTIONSrequest 而不是GET. 尝试X-Requested-With通过添加以下代码行来删除HTTP 标头：
delete $http.defaults.headers.common['X-Requested-With'];
Regarding CORS, following is mentioned on Mozilla Developer Network:
关于 CORS，Mozilla Developer Network上提到了以下内容：
The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser.
跨源资源共享标准的工作原理是添加新的 HTTP 标头，允许服务器描述允许使用 Web 浏览器读取该信息的源集。
回答by reedog117
I have been having the issue using $resource, which also uses $http.
我在使用 $resource 时遇到了这个问题，它也使用了 $http。
I noticed that when I used AngularJS 1.0.6 the request would not even show up in Firebug, but when using AngularJS 1.1.4 Firebug would show the GET request and the 200 OK response as well as the correct headers, but an empty response. In fact, the headers also showed that the data was coming back as shown by the "Content-Length" header having the correct content length, and comparing this against a REST Client plugin I was using that was successfully retrieving the data.
我注意到，当我使用 AngularJS 1.0.6 时，请求甚至不会出现在 Firebug 中，但是当使用 AngularJS 1.1.4 Firebug 时，它会显示 GET 请求和 200 OK 响应以及正确的标头，但响应为空。事实上，标头还显示数据正在返回，如具有正确内容长度的“Content-Length”标头所示，并将其与我正在使用的 REST 客户端插件进行比较，该插件成功检索了数据。
After being even further suspicious I decided to try a different browser. I had originally been using Firefox 16.0.1 (and also tried 20.0.1), but when I tried IE 9 (and AngularJS 1.1.4) the code worked properly with no issues at all.
在进一步怀疑之后，我决定尝试不同的浏览器。我最初使用的是 Firefox 16.0.1（也尝试过 20.0.1），但是当我尝试 IE 9（和 AngularJS 1.1.4）时，代码运行正常，完全没有问题。
Hopefully this will help you find a workaround. In my case, I noticed that I never had this problem with relative URLs, so I'm changing my app around so that both the app and the API are being served on the same port. This could potentially be an AngularJS bug.
希望这将帮助您找到解决方法。就我而言，我注意到相对 URL 从来没有出现过这个问题，所以我正在更改我的应用程序，以便应用程序和 API 都在同一个端口上提供服务。这可能是一个 AngularJS 错误。
回答by Scott
I had the same problem today with firefox. IE worked fine. I didn't think it was cors at first because like you I got no errors in the console and got a status of 0 back in my error method in angular. In the firefox console I was getting a 200 response back in my headers and a content length, but no actual response message. Firefox used to give you a warning about cross site scripting that would point you in the right direction. I resolved the issue by setting up cors on my api. This is really the best way to go. If you are only using GET with your api you could also try using jsonp this is built right into angular and it is a work around for cors when you do not control the api you are consuming.
我今天在 Firefox 上遇到了同样的问题。IE 工作正常。一开始我不认为这是 cors，因为像你一样，我在控制台中没有错误，并且在我的错误方法中以 angular 返回状态为 0。在 firefox 控制台中，我在标题和内容长度中收到了 200 响应，但没有实际响应消息。Firefox 过去会向您发出有关跨站点脚本的警告，这会为您指明正确的方向。我通过在我的 api 上设置 cors 解决了这个问题。这确实是最好的方法。如果您仅将 GET 与您的 api 一起使用，您也可以尝试使用 jsonp，这是内置于 angular 中的，当您不控制正在使用的 api 时，它是 cors 的一种解决方法。
$http.jsonp('http://yourapi.com/someurl')
.success(function (data, status, headers, config) {
alert("Hooray!");
})
.error(function (data, status, headers, config) {
alert("Dang It!");
});
回答by Florian Wendelborn
It's cross-site-scripting protection. Try starting google chrome with --disbable-web-security (via command line). If that isn't working also try to put your angular stuff into an http server instead of using the file protocol. (Tip: use chrome canary if you want to have a browser dedicated to --disable-web-security - of course you'll have to set the command line argument too, but both chrome versions run simultaneously). For release you'll have to set some http headers on the server providing the AngularJS-stuff to allow access to the twitter api or whatever you want to call.
它是跨站点脚本保护。尝试使用 --disbable-web-security （通过命令行）启动谷歌浏览器。如果这不起作用，也尝试将您的角度内容放入 http 服务器而不是使用文件协议。（提示：如果您想要一个专用于 --disable-web-security 的浏览器，请使用 chrome canary - 当然您也必须设置命令行参数，但两个 chrome 版本同时运行）。对于发布，您必须在提供 AngularJS 东西的服务器上设置一些 http 标头，以允许访问 twitter api 或您想要调用的任何内容。
