AngularJS的$http.get请求失败（但我看到数据已返回）

Question

我正在学习AngularJS手机教程，想要从远程服务器获取手机的JSON数据。

$http.get('http://myserver.com/phones.json').success(function(data) {
    $scope.phones = data;
});

因为CORS的原因，我的请求发送的是OPTIONS而不是GET请求，所以我在控制器中添加了这一行代码

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

我可以在Charles中看到向myserver.com发送的GET请求，而不是OPTIONS请求，并且手机JSON在响应中。但是，http.get仍然返回状态0，'data'为null。我不确定接下来该怎么尝试。欢迎任何建议。

- kurt steele

---

尝试在您的URL末尾添加?callback=?。 - tymeJV

Answer 1

它不应该对GET发出OPTIONS请求，所以这听起来是正确的。我认为你想要做的是：

$http.get('http://myserver.com/phones.json').then(function(data) {
  $scope.phones = data;
}, function(err) { alert('Oh no! An error!'});

我认为你想要使用then()，它接受两个函数作为参数 - 第一个用于成功，第二个用于错误。 $http.get()返回一个promise，由then()执行。

此外，您可能想要使用$resource而不是$http。 它提供了更高级别的抽象，并允许更可重用的样式，http://docs.angularjs.org/api/ngResource.$resource 编辑：

请查看angular调试工具here。 它显示作用域中可用的内容，并显示性能数据。

- Stuart Nelson

---

它应该按原样工作。教程说明“$http.get服务返回一个带有成功方法的promise对象。我们调用此方法来处理异步响应并将电话数据分配给范围”。我已经使用了then与success和error块，并以服务的形式编写了这个，等等。我的目标是最简单的http请求演示，而不是资源调用。我总是在Charles响应中看到JSON，但http.get返回状态0。到目前为止，我还没有找到跨域示例应用程序，只有本地平面文件示例。 - kurt steele

尝试添加 $http.defaults.useXDomain = true;。 - Stuart Nelson

谢谢，这个方法没有成功，状态码仍然是0，这对于Angular来说是一个很大的限制。我会研究使用http.jsonp方法，它不使用XHR。 - kurt steele

Answer 2

这是一个很好的教程，它使用 $http.jsonp 方法实现了跨域 GETS。没有对头文件进行任何黑客攻击。

http://net.tutsplus.com/tutorials/javascript-ajax/building-a-web-app-from-scratch-in-angularjs/

- kurt steele

Answer 3

如果您正在进行跨域请求，那么作为预检请求，进行OPTION请求以了解是否允许是正确的。 如果CORS失败，您的浏览器将接收数据，但会抛出错误。 因此，要么将您的HTML放在同一域中，要么将CORS添加到您的后端（这更加困难）。

- pedroassis

---

我解决了CORS问题。但是说到CORS，一个应用程序想要进行跨域请求有什么不寻常的之处？一个Angular应用程序如何调用5个无法调整的分布式地理服务？ - kurt steele

这是一个浏览器安全问题，称为SOR（同源策略）。好吧，CORS是HTML5的一个功能，即将变得普遍，现在您可以进行跨站点请求而无需任何黑客攻击。 - pedroassis

这是一个很棒的教程，回答了我的问题。 - kurt steele

我建议您使用CORS，jsonp是一种hack方法。 - pedroassis