AngularJS：$HTTP.GET 被取消答案

【问题标题】：AngularJS: $HTTP.GET is getting cancelledAngularJS：$HTTP.GET 被取消
【发布时间】：2013-04-11 17:31:18
【问题描述】：

我正在尝试使用 angularJS 的 $http 服务，但它似乎不起作用。我已经在网上阅读了有关此类问题的信息，但给出的解决方案无济于事。我的控制器中有以下内容：

app.controller('Ctrl', function($scope, $http){    
    var url = http://someurl?name=foo;
    $scope.submitRules = function(){
        $http({method: 'GET', url: url}).
              success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
              }).
              error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
              });
    };
});

我正在使用这个版本的 angularJS <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>

每当我尝试发送请求时，它都会显示请求状态为已取消。我向其发送请求的 URL 运行良好，但它在 angularJS 中不起作用。有人可以帮忙吗？

【问题讨论】：

这太模糊了，无法理解……你能举个例子吗？
我正在尝试将一些数据发送到我的服务器并希望将其存储在 mysql DB 中。数据被添加到 URL 并作为 http get 请求发送。但是当我在 chrome 中检查开发者控制台时。我看到请求没有通过并被取消。
不幸的是，这可能有很多原因
您确定问题不在于您的服务吗？
是的.. 直接从浏览器使用的 URL 工作正常。当我使用 jsonp 方法时，它工作正常。看起来像 CORS .. 有解决方法吗？

标签： angularjs http-headers

【解决方案1】：

我发现所有这些 CORS 内容令人困惑。但我能说什么呢？我是一个学习缓慢的人。您描述的问题可能可以通过控制器解决，但我认为最好在入口点进行设置。例如：

angular.module('myApp', ['ngResource', 'ui.bootstrap']).
    config(function($httpProvider) {

        // Enable CORS
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];

        ...
  });

鉴于您提供的代码，这也可能有效（未经测试）：

app.controller('Ctrl', function($scope, $http, $httpProvider){    
    var url = http://someurl?name=foo;
    $scope.submitRules = function(){

        // Enable CORS
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];

        $http({method: 'GET', url: url}).
              success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
              }).
              error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
              });
    };
});

不管怎样，所有的魔法都发生在这两行：

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

【讨论】：

【解决方案2】：

如果不是 CORS，您可以使用带有 CORS 扩展的 chromium 检查，尝试设置您的请求超时：

app.controller('Ctrl', function($scope, $http){    
    var url = http://someurl?name=foo;
    $scope.submitRules = function(){
        $http({
            method: 'GET',
            url: url,
            timeout: 50000
        }).
        success(function(data, status) {
          $scope.status = status;
          $scope.data = data;
        }).
        error(function(data, status) {
          $scope.data = data || "Request failed";
          $scope.status = status;
        });
    };
});

设置 $httpProvider 从不对我有用，这是服务器问题。

【讨论】：