跨域HTTP請求在AngularJS中失敗

Question

我有一個REST後端和Spring（啓用CORS的Apache Tomcat 7上運行）和一個AngularJS客戶端。兩者都運行在不同的領域（就CORS而言）。

我試圖實現基本身份驗證，但它只適用於客戶端和服務都在相同的主機/端口號，即使我證實CORS在服務器端正常工作。 （我通過禁用basic auth impl來測試它，並簡單地檢查客戶端是否能夠從服務中獲取數據。只要服務上的CORS過濾器正常工作，它就會工作 - 正如預期的那樣）。

下面是客戶端配置

啓用對角跨域請求（我聽說，這是沒有必要的對角1.2+但它似乎沒有工作無論哪種方式）

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

HTTP調用

$http({method: 'GET', url: url + userId, headers: {'Authorization': 'Basic ' + Base64.encode('admin' + ':' + 'password')}}). 
    success(function(data, status, headers, config) { 
// 
    }). 
    error(function(data, status, headers, config) { 
// 
    }); 

後端CORS過濾

FilterRegistration corsFilter = container.addFilter("CORS", CORSFilter.class); 
corsFilter.setInitParameter("cors.supportedMethods", "GET, HEAD, POST, PUT, DELETE, OPTIONS"); 
corsFilter.setInitParameter("cors.supportedHeaders", "Accept, Origin, X-Requested-With, Content-Type, Last-Modified"); 
corsFilter.setInitParameter("cors.supportsCredentials ", "false"); 
corsFilter.setInitParameter("cors.allowOrigin ", "*"); 
corsFilter.addMappingForUrlPatterns(null, false, "/*"); 

Spring Security進行基本驗證

@Configuration 
@EnableWebSecurity 
public class SecurityConfig extends WebSecurityConfigurerAdapter { 

    @Autowired 
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { 
     auth 
      .inMemoryAuthentication() 
       .withUser("admin").password("password").roles("USER", "ADMIN"); 
    } 


    @Override 
    protected void configure(HttpSecurity http) throws Exception { 
    http.authorizeRequests() 
     .antMatchers("/**").hasRole("USER") 
     .anyRequest().anonymous() 
     .and() 
     .httpBasic(); 
    }  
} 

錯誤，我得到（全誤差，爲每個請求由客戶支付給提供服務的另一個域運行時）

Failed to load resource: the server responded with a status of 403 (Forbidden) (11:53:44:206 | error, network) 
    at http://localhost:8081/myApp-service/user/6 
Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access. (11:53:44:209 | error, network) 
    at http://localhost:8081/myApp-service/user/6 
XMLHttpRequest cannot load http://localhost:8081/myApp-service/user/6. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access. (11:53:44:211 | error, javascript) 
    at app/index.html 

Chrome的請求頭

Request URL:http://localhost:8081/myApp-service/user/6 
Request Method:OPTIONS 
Status Code:403 Forbidden 
Request Headersview source 
Accept:*/* 
Accept-Encoding:gzip,deflate,sdch 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:accept, authorization 
Access-Control-Request-Method:GET 
Connection:keep-alive 
Host:localhost:8081 
Origin:http://localhost:8383 
Referer:http://localhost:8383/myApp-client/app/index.html 
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36 
Response Headersview source 
Content-Length:93 
Content-Type:text/plain;charset=ISO-8859-1 
Date:Wed, 26 Feb 2014 18:55:00 GMT 
Server:Apache-Coyote/1.1 

因此，大家可以看到，角是無法應對CORS飛行前OPTIONS甚至AFTE適當CON無花果寫。一切工作正常在同一個域和後端CORS過濾器被測試獨立工作。所以不知道我在這裏錯過了什麼。謝謝！

Answer 1

我認爲問題出在我的客戶身上，但正如Ray指出的那樣，這是我的服務。

當我知道我需要調試我的服務時，我下載了CORSFilter的源代碼，正確放置了斷點來研究服務器響應。

這樣做，我發現CORS過濾器在請求標題中遇到「授權」時會拋出異常。這是因爲我沒有將它添加到支持的標題列表中。在我將它添加到列表後，問題很快得到解決。

corsFilter.setInitParameter("cors.supportedHeaders", "Accept, Origin, X-Requested-With, Content-Type, Last-Modified, Authorization");