AngularJS CORS请求自定义标题

Question

我在与AngularJS结合使用我的服务器上启用CORS时遇到问题。我采用了棱角分明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']; 

我甚至试图把$http.defaults.headers.common.Authorization = Auth.getAuthToken();的$resource之前在Balance资源工厂，但没有帮助。

无论使用什么方法，发送到预检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 

有什么建议吗？

Answer 1

经过大量研究后，我发现问题并未出现，因为AngularJS或Apache配置。这是后端服务器应用程序（Java）中的一个问题。这些网址对所有HTTP方法都是受限的，所以当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); 
} 

Answer 2

我使用了不同的方法，但前提依然如此。

首先尝试将承载您的访问令牌的面前：

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

如果不试试这个： 的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(); 
    } 
); 

Answer 3

据我知道你不能与Access-Control-Allow-Credentials "true"使用Access-Control-Allow-Origin "*"。

Answer 4

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