AngularJS-HTTP請求在控制器中發出預檢請求，但不在app.js中

Question

我有一個與外部API通信的應用程序。 我的應用程序為每個頁面都有一個控制器。 如果我在一個控制器中發出HTTP GET請求，它會發送一個OPTIONS預檢請求，並且會收到錯誤消息：

XMLHttpRequest無法加載http：// dev / api /？email_address=email@email.com&password=111111 。 請求標頭字段在飛行前響應中，Access-Control-Allow-Headers不允許進行授權。

但是，如果我復制粘貼相同的代碼並將其粘貼到我的app.js文件中，則它可以正常工作並返回數據。 我發現以這種方式它也只發送GET請求，而不發送OPTIONS請求。

我嘗試將標頭內容類型作為“文本/純文本”添加到我的請求中，但這沒有任何改變。 如果我嘗試使用jQuery進行請求，那么它會很好地工作，僅發送GET請求，而無論代碼是在控制器中還是在app.js文件中。 這是完整的控制器代碼（以Angular形式）：

angular.module('website.homepage', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'homepage/view.html',
        controller: 'HomepageCtrl',
        resolve: {
            data: function($q, $http, $route, $rootScope) {
                var deferred = $q.defer();
                $http({method: 'GET', url: $rootScope.apiURL + 'home'})
                    .then(function(data) {
                        deferred.resolve(data);
                    });
                return deferred.promise;
            }
        }
    })
}])
.controller('HomepageCtrl', function ($scope, $http, data) {

        var url = "http://dev.api";

        $http({
            url: url,
            dataType: 'json',
            method: "GET",
            data: '',
            params: {
                email_address: 'email@email.com',
                password: '111111'
            },
            headers: {
                'Content-Type': 'text/plain'
            }
        })
        .success(function(response) {
            console.log(response);

        })
       .error(function(response) {
            console.log(response);
       });


 })
 .config(function ( $httpProvider) {
     delete $httpProvider.defaults.headers.common['X-Requested-With'];
 })

Answer 1

研究了代表跨域資源共享的CORS概念。 CORS是一種技術，通過它可以允許從其他域請求 Internet上一個位置上的資源。 作為一項安全功能，由於稱為“ 相同來源策略”的概念，默認情況下禁止跨域請求。

之所以會出現錯誤，是因為您試圖發出跨域請求，但實際上是不允許的。

嘗試刪除Angular默認發送的標頭，以防止此類請求：

angular.module('someModule') 
.config(function ( $httpProvider) {        
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
})...

更新

我認為，一個模塊中只能有一個配置塊。 因此，您需要將兩個配置合並為一個配置：

angular.module('website.homepage', ['ngRoute'])
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) { // inject the other provider here
$routeProvider.when('/', {
    templateUrl: 'homepage/view.html',
    controller: 'HomepageCtrl',
    resolve: {
        data: function($q, $http, $route, $rootScope) {
            var deferred = $q.defer();
            $http({method: 'GET', url: $rootScope.apiURL + 'home'})
                .then(function(data) {
                    deferred.resolve(data);
                });
            return deferred.promise;
        }
      }
    });

    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}])...   // rest of your code (services, factories, whatever)