Angularjs 问题 $http.get 不起作用 [英] Angularjs issue $http.get not working

问题描述

我是 Angularjs 的新手，并尝试遵循 angularjs 网站文档中为 $http.get 给出的示例.

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

我有一个 REST 服务，它在调用时返回如下数据:

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}

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

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>

<form class="form-horizo​​ntal"><button class="btn btn-success btn-large" ng-click="fetch()">搜索</button></表单><h2>文件名</h2><pre>http 状态码:{{status}}</pre><div ng-repeat="data.files 中的文件"><pre>文件名:{{file.filename}}</pre>

And my js file looks as follows:

我的js文件如下所示:

But when I run this, I do not see any result for filenames and I see http status code = 0

When I run , 

但是当我运行这个时，我没有看到文件名的任何结果，我看到 http 状态代码 = 0

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 

在浏览器中，我仍然可以看到想要的结果(如上所述)

OPTIONS "Above URL"

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

instead of

代替

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

Can you please let me know, what I am doing wrong and why I am not able to access JSON data ?

谢谢，

推荐答案

这是因为 angular 如何处理 CORS 请求(跨站 HTTP 请求).默认情况下，Angular 添加了一些额外的 HTTP 标头，这就是为什么您看到 OPTIONS 请求而不是 GET 的原因.尝试通过添加以下代码行删除 X-Requested-With HTTP 标头:

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'];

关于 CORS，在 Mozilla 开发者网络:

Regarding CORS, following is mentioned on Mozilla Developer Network:

跨域资源共享标准通过添加新的 HTTP允许服务器描述一组源的标头允许使用网络浏览器阅读该信息.

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屋！