Cross-Origin Resource Sharing（CORS）のAngularJSスプリングセキュリティログイン/ログアウト

Question

問題文：私のUIアプリケーションは、9000ポート（gruntプロジェクト）とサーバーサイドのスプリングブートプロジェクトが8421ポートで動作しています。私はログインとログアウトを除いて私のUIアプリからすべてのURLをヒットすることができます。 CORSで春のセキュリティのログインとログアウトを設定するにはどうすればいいのか教えてください。

App.js

$scope.login = function() { 
     $http.post('http://localhost:8421/login', $.param($scope.credentials), { 
      headers : { 
      'content-type' : 'application/x-www-form-urlencoded' 
      } 
     }).success(function() { 
      console.log('login success'); 
      }); 
     }).error(function() { 
      console.log('login error'); 
     }); 
     }; 

SecurityConfiguration.java

public class SecurityConfiguration extends WebSecurityConfigurerAdapter { 

@Override 
    protected void configure(HttpSecurity http) throws Exception { 

     http.addFilterBefore(new SimpleCORSFilter(), ChannelProcessingFilter.class) 
     .authorizeRequests().antMatchers("/rest/**").permitAll() 
     .and().logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")) 
     .logoutSuccessUrl("/index.html")   
     .and().exceptionHandling().authenticationEntryPoint(authenticationEntryPoint)  
     .and().formLogin().successHandler(authenticationSuccessHandler) 
     .and().formLogin().failureHandler(authenticationFailureHandler)   
     .and().csrf().disable(); 
    } 

@Autowired 
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { 

     auth.userDetailsService(userDetailsService).passwordEncoder(new BCryptPasswordEncoder()); 
    } 
} 

SimpleCORSFilter.java

public class SimpleCORSFilter implements Filter { 
@Override 
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 
     HttpServletRequest request = (HttpServletRequest) req; 
     HttpServletResponse response = (HttpServletResponse) res; 

     response.setHeader("Access-Control-Allow-Origin", "*"); 
     response.addHeader("Access-Control-Allow-Credentials", "true"); 
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 

     chain.doFilter(req, res); 
    } 

    @Override 
    public void init(FilterConfig filterConfig) { 

    } 

    @Override 
    public void destroy() { 

    } 
} 

login.htmlと

<form> 
<div class="rb-form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"> 
      <input type="text" name="username" class="form-control" ng-model="credentials.username" placeholder="enter your username" required> 
     </div> 

     <!-- PASSWORD --> 
     <div class="rb-form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }"> 
      <input type="password" name="password" class="form-control" ng-model="credentials.password" placeholder="enter your password" required>   
     </div> 

     <div class="rb-form-group"> 
      <button class="btn btn-primary btn-block" ng-disabled="userForm.$invalid" ng-click="login()">Login</button>   
     </div> 
</form> 

01事前

ネットワークのの

おかげで

Remote Address:[::1]:8421 
Request URL:http://localhost:8421/login 
Request Method:POST 
Status Code:200 OK 
Response Headers 
view source 
Access-Control-Allow-Credentials:true 
Access-Control-Allow-Credentials:true 
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept 
Access-Control-Allow-Methods:POST, GET, PUT, OPTIONS, DELETE 
Access-Control-Allow-Origin:* 
Access-Control-Max-Age:3600 
Cache-Control:no-cache, no-store, max-age=0, must-revalidate 
Content-Length:0 
Date:Tue, 17 Nov 2015 04:01:57 GMT 
Expires:0 
Pragma:no-cache 
Server:Apache-Coyote/1.1 
Set-Cookie:JSESSIONID=D22C05E81D4FC86EA32BD6545F2B37FF; Path=/; HttpOnly 
X-Content-Type-Options:nosniff 
X-Frame-Options:DENY 
X-XSS-Protection:1; mode=block 
Request Headers 
view source 
Accept:application/json, text/plain, */* 
Accept-Encoding:gzip, deflate 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Content-Length:31 
content-type:application/x-www-form-urlencoded 
Host:localhost:8421 
Origin:http://localhost:9000 
Referer:http://localhost:9000/src/ 
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36 

Answer 1

をログ限りCORSの問題が懸念されるとして、以下のようにAccess-Control-Allow-Headers headerにauthorizationとclient-security-tokenを追加してください。

response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"); 

CORSフィルタが正しく設定されている場合、これは正しく動作するはずです。

春のセキュリティでAJAXベースのログインを使用するには、若干異なるアプローチを採用することができます。これは、ここで説明されています

• Spring security 3 Ajax login – accessing protected resources
• Implementing Ajax Authentication

は、それが、すべての問題のためにコメントをお気軽にお役に立てば幸い！

Answer 2

私はAngularJSとSpringアプリケーションでこの問題を解決しました。それは非常に簡単です。ただ、それをシンプルに保つポストangularjs spring cross-origin request blocked