Angularjs发行$ http.get不起作用 [英] Angularjs issue $http.get not working

问题描述

我有一个REST服务，当它被调用时返回一个REST服务数据如下：

  http://abc.com:8080/Files/REST/v1/list?&filter= FILE 
 
 
 {
文件：[
 {
文件名：a.json，
type： json，
uploaded_ts：20130321
}，
 {
文件名：b.xml，
type：xml ，
uploaded_ts：20130321
} 
]，
num_files：2} 
  

我的index.html文件的部分内容如下所示：

 < div class =span6ng-controller =FetchCtrl> 
< form class =form-horizo​​ntal> 
< button class =btn btn-success btn-largeng-click =fetch（）>搜索< / button> 
< / form> 
< h2>档案名称< / h2> 
< pre> http状态码：{{status}}< / pre> 
< div ng-repeat =data.files中的档案> 
< pre>档名：{{file.filename}}< / pre> 
< / div> 
  

我的js文件如下所示：

 函数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}）。 
成功（函数（数据，状态）{
 $ scope.status = status; 
 $ scope.data = data; 
}）。 
错误（函数（数据，状态）{
 $ scope.data = data ||请求失败; 
 $ scope.status = status; 
}）; 
}; 
} 
  

但是当我运行这个时，我没有看到文件名的结果，请参阅http status code = 0

运行时，

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

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

我甚至试图在firefox中使用Firebug进行调试，当我点击搜索按钮时，我看到上面的URL被调用，但响应看起来是空的。有趣的是，在URL下的Firebug中，它显示了

 
选项URL以上
 

而不是

 
 GETURL以上
 

你能告诉我，我做错了什么，为什么我无法访问JSON数据？

谢谢，

解决方案

这是因为角度如何处理CORS请求（跨站点HTTP请求）。 Angular默认添加了一些额外的HTTP头，这就是为什么你看到 OPTIONS 请求而不是 GET 。尝试通过添加以下代码行删除 X-Requested-With HTTP标头：

 删除$ http.defaults.headers.common ['X-Requested-With']; 
  

关于CORS， Mozilla开发人员网络：

跨源资源共享标准通过添加新的HTTP
头来实现，该头允许服务器描述允许使用Web浏览器读取该信息的
源的集合。 / p>

I am a novice to Angularjs and tried to follow example given for $http.get on angularjs website documentation.

I have a REST service, which when invoked returns data as follows:

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:

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

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

When I run ,

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

in browser, I still can see desired results (as mentioned above)

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

   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 ?

Thanks,

解决方案

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 OPTIONS request instead of GET. Try removing X-Requested-With HTTP header by adding this line of code:

delete $http.defaults.headers.common['X-Requested-With'];

Regarding CORS, following is mentioned on 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.

这篇关于Angularjs发行$ http.get不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！