AngularJS：$HTTP.GET被取消

Question

我正在尝试使用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无法正常工作。 有人能帮忙吗？

- Rakesh Goyal

---

这个说法太模糊了，不太容易理解……你能给一个例子吗？ - Andrew Joslin

我正在尝试将一些数据发送到我的服务器，并想将其存储在mysql数据库中。该数据被添加到URL中，并作为http GET请求发送。但是，当我在Chrome的开发者控制台中检查时，我发现该请求未能完成并被取消了。 - Rakesh Goyal

很遗憾，这可能有很多原因。 - Andrew Joslin

你确定问题不是出在你的服务上吗？ - Sharondio

是的，当直接从浏览器使用URL时，它可以正常工作。 当我使用jsonp方法时，它也可以正常工作。看起来像是CORS问题..有没有解决方法？ - Rakesh Goyal

给出具体的例子 - honzajde

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

- Daniel Bidulock

Answer 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 对我来说从未奏效，这更多是服务器问题。

- Piotr Pęczek