20

我是 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 中，它显示

   选项“高于 URL”

代替

   获取“以上网址”

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

谢谢，

4

4 回答 4

19

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

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

关于 CORS，Mozilla 开发者网络上提到了以下内容：

跨域资源共享标准通过添加新的 HTTP 标头来工作，这些标头允许服务器描述允许使用 Web 浏览器读取该信息的源集。

于 2013-03-21T08:25:54.837 回答
3

我一直在使用 $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-26T16:51:01.830 回答
2

我今天用firefox遇到了同样的问题。IE 运行良好。起初我不认为这是 cors，因为像你一样，我在控制台中没有错误，并且在我的错误方法中得到了 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!");
    });
于 2013-11-21T06:10:16.333 回答
0

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

于 2013-10-21T18:00:03.260 回答