Angularjs发出$ http.get无效

Question

我是Angularjs的新手,并尝试按照angularjs网站文档中的$ http.get给出的示例.

我有一个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中使用Firebug进行调试,我看到上面的URL在我点击"搜索"按钮时被调用,但响应看起来是空的.有趣的是,在URL下的Firebug中,它显示了

   OPTIONS "Above URL" 

代替

   GET "Above URL"

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

谢谢,

Answer 1

这是因为角度处理CORS请求(跨站点HTTP请求).Angular默认添加了一些额外的HTTP标头,这就是为什么你要看到OPTIONS请求而不是GET.尝试X-Requested-With通过添加以下代码来删除HTTP标头:

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

关于CORS,Mozilla Developer Network上提到了以下内容:

跨源资源共享标准的工作原理是添加新的HTTP标头,允许服务器描述允许使用Web浏览器读取该信息的起源集.