AngularJS

Question

我有一个与外部通信的应用程序 API。我的应用程序的每个页面都有一个控制器。如果我在我的一个控制器中发出 HTTP GET 请求，它会发送一个 OPTIONS 预检请求，并且我收到一个错误：

XMLHttpRequest cannot load http://dev/api/?email_address=email@email.com&password=111111. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

但是，如果我复制粘贴相同的代码并将其粘贴到我的 app.js 文件中，它会完美运行并且 returns 我的数据。我发现这样它也只发送 GET 请求，而不发送 OPTIONS 请求。

我尝试将 header 内容类型添加为 "text/plain" 到我的请求中，但这没有任何改变。如果我尝试使用 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 代表 Cross-Origin 资源共享的概念。 CORS 是一种技术，通过该技术允许其他域请求互联网上一个位置上的资源。作为一项安全功能，由于称为 same origin policy.

的概念，默认情况下禁止 cross-origin 请求

您收到错误是因为您试图发出 cross-origin 请求，实际上，被禁止。

尝试删除Angular默认发送的header以防止这样的请求：

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)

AngularJS - HTTP 请求在控制器中发出预检请求但不在 app.js 中

AngularJS - HTTP request makes preflight request in controllers but not in app.js

javascript

jquery

cors

preflight

更新