Angularjs issue $ http.get不能正常工作

我是Angularjs的新手，并试图遵循在httpjget上给出的有关angularjs网站文档的示例。

我有一个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}

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

而我的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; 
    }); 
    };  
}

但是，当我运行这个，我看不到任何文件名的结果，我见HTTP状态代码= 0

当我运行，

http://abc.com:8080/Files/REST/v1/list?&filter=FILE

在浏览器中，我仍然可以看到所希望的结果（如上所述）

我甚至试图在Firefox使用萤火虫调试，我看到上述URL被调用当我点击“搜索”按钮但响应看起来是空的。有趣的是在URL下的萤火虫，它显示

 
    OPTIONS "Above URL"

代替

 
    GET "Above URL"

能否请您让我知道，我在做什么错的，为什么我不能够访问JSON数据？

感谢，

来源

2013-03-21 SagarL

嘿，我知道这已经有一段时间了，但是你有没有深究过这个问题的底部？接受的答案在Firefox或Chrome中不适用于我。它仍然在调用OPTIONS。 – tbogatchev 2015-03-16 20:53:43

这是因为如何对待角CORS请求（跨站HTTP请求）。 Angular默认添加了一些额外的HTTP标头，这就是为什么你看到OPTIONS请求而不是GET。通过添加新的HTTP 头，让

的跨来源资源共享的标准作品：尝试通过加入这一行的代码删除X-Requested-With HTTP标头：
delete $http.defaults.headers.common['X-Requested-With']; 
关于CORS，以下是对Mozilla Developer Network提到服务器来描述允许使用网络浏览器读取该信息的一组起始点。

来源

2013-03-21 08:25:54

它在Firebug中的部分工作意义从angular.min.js中删除

 "X-Requested-With":"XMLHttpRequest"

后，我可以看到'GET'URL''（请让我知道这是否正确）。但我仍然无法在html页面中获得任何回应。不确定，如果我做错了什么。 – SagarL 2013-03-22 07:13:27

你现在得到什么状态码？ – 2013-03-22 07:37:22

当我通过Firebug进行检查时，我得到的状态代码为'200 OK'，但没有在响应中显示。但是当我刚刚运行REST调用时，我确实以正确的响应将状态代码设置为“200 OK”。 – SagarL 2013-03-22 19:33:23

我一直在使用$ resource，它也使用$ http的问题。

我注意到，当我使用AngularJS 1.0.6时，请求甚至不会显示在Firebug中，但是当使用AngularJS 1.1.4时，Firebug会显示GET请求和200 OK响应以及正确的标题，但一个空的回应。实际上，标题还显示数据已返回，正如内容长度正确的“Content-Length”标题所示，并将其与我正在使用的REST客户端插件进行比较，该插件正在成功检索数据。

在进一步怀疑之后，我决定尝试使用不同的浏览器。我原本使用Firefox 16.0.1（也尝试过20.0.1），但是当我尝试IE 9（和AngularJS 1.1.4）时，代码运行正常，完全没有问题。

希望这可以帮助您找到解决方法。在我的情况下，我注意到我从来没有相对URL的这个问题，所以我改变我的应用程序，使应用程序和API都在同一端口。这可能是一个AngularJS错误。

来源

2013-04-26 16:51:01 reedog117

它是跨站点脚本保护。尝试用--disbable-web-security（通过命令行）启动google chrome。如果这不起作用，也尝试把你的角色的东西放入http服务器，而不是使用文件协议。（提示：如果您想让浏览器专用于--disable-web-security，则使用chrome canary - 当然，您也必须设置命令行参数，但两个chrome版本都同时运行）。对于发行版，您必须在服务器上设置一些提供AngularJS内容的http标头，以允许访问Twitter API或任何您想调用的内容。

来源

2013-10-21 18:00:03 Dodekeract

我今天有与Firefox相同的问题。 IE工作正常。我一开始并不认为它是cors，因为和你一样，我在控制台中没有发现错误，并且在我的错误方法中获得了0的状态。在firefox控制台中，我收到了一个200响应，头部和内容长度都没有，但没有实际的响应消息。 Firefox曾经给你一个关于跨站点脚本的警告，它会指向你正确的方向。我通过在我的api上设置cors来解决了这个问题。这真的是最好的方式。如果你只使用GET方式，你也可以尝试使用jsonp，这个方法是直接构建的，当你不控制你正在使用的api时，它是一个解决方案。

$http.jsonp('http://yourapi.com/someurl') 
    .success(function (data, status, headers, config) { 
     alert("Hooray!"); 
    }) 
    .error(function (data, status, headers, config) { 
     alert("Dang It!"); 
    });

来源

2013-11-21 06:10:16 Scott

Angularjs issue $ http.get不能正常工作

回答

相关问题