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