AngularJS CORS 请求自定义标头答案

【问题标题】：AngularJS CORS request custom headerAngularJS CORS 请求自定义标头
【发布时间】：2014-08-13 08:58:54
【问题描述】：

在我的服务器上启用 CORS 和 AngularJS 时遇到问题。我正在使用 Angular 1.2.16，这是我的服务器配置：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name, Authorization"
Header set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Credentials "true"

我可以使用以下请求：

$http.post(configuration.authUrl, {username: 'username', password: 'password'})
    .success(function (data) {
         $cookieStore.put(configuration.sessionName, {
             token: data.authenticationToken,
              user: data.user
         });
    })
    .error(function () {}));

因为此请求不使用自定义标头。

当我之后尝试请求以下内容时： Balance.get() 余额为：

angular.module('portalApp')
    .factory('Balance', ['$resource', 'Auth', 'configuration', function ($resource, Auth, configuration) {
        return $resource(configuration.balanceUrl, {}, {
            get: {
                method: 'GET',
                isArray: false,
                headers: {
                    Authorization: Auth.getAuthToken()
                }
            }
        });
    }]);

我在 balanceUrl 上得到一个401 Unauthorized。

在我放置的配置中：

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

我什至尝试在 Balance 资源工厂中将 $http.defaults.headers.common.Authorization = Auth.getAuthToken(); 放在 $resource 之前，但这没有帮助。

无论我使用什么方法，发送到预检OPTIONS 请求的标头都没有Authorization 标头。这些是预检OPTIONS 请求的请求标头。

OPTIONS /api/v1.0/user/orders HTTP/1.1
Host: host
Connection: keep-alive
Cache-Control: no-cache
Access-Control-Request-Method: GET
Pragma: no-cache
Origin: origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: referer
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

有什么建议吗？

【问题讨论】：

标签： javascript angularjs cors

【解决方案1】：

据我所知，Access-Control-Allow-Origin "*" 不能与 Access-Control-Allow-Credentials "true" 一起使用。

【讨论】：

【解决方案2】：

经过大量研究，我发现问题并没有因为 AngularJS 或 Apache 配置而发生。这是后端服务器应用程序（Java）中的一个问题。所有 HTTP 方法的 url 都受到限制，因此当 AngularJS 想要执行预检 OPTIONS 请求时，访问被拒绝并返回了 401。

这是通过以下方式解决的：

if(!authenticationService.isTokenValid(glueToken) && !((HttpServletRequest)servletRequest).getMethod().equals(HttpMethod.OPTIONS.toString()) ){
  response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
} else {
  filterChain.doFilter(servletRequest, servletResponse);
}

代替：

if(!authenticationService.isTokenValid(glueToken)){
  response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
} else {
  filterChain.doFilter(servletRequest, servletResponse);
}

【讨论】：

【解决方案3】：

为什么不匿名（不执行身份验证或授权）允许选项飞行前请求。 https://stackoverflow.com/a/21458845/101662

【讨论】：

这就是我在自己的回答中所做的，所以是的，这行得通
听起来选项失败了？

【解决方案4】：

我使用了完全不同的方法，但前提仍然相同。

首先尝试将 Bearer 放在您的访问令牌前面：

headers: {
    Authorization: 'Bearer ' + Auth.getAuthToken()
}

如果不试试这个：如果您没有将 app 设置为变量，app.config 可能无法正常工作，因此您可能需要进行调整。

app.config(
    function($httpProvider) {
        $httpProvider.defaults.headers.common = {};
        $httpProvider.defaults.headers.post = {};
        $httpProvider.defaults.headers.put = {};
        $httpProvider.defaults.headers.patch = {};

        $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + Auth.getAuthToken();
    }
);

【讨论】：