Accesso di sicurezza angolareJS/logout con Cross-Origin Resource Sharing (CORS)

Question

Dichiarazione di problema: La mia app UI è in esecuzione su 9000 port (progetto grunt) e il mio progetto di avvio a molla lato server in esecuzione su 8421 port. Sono in grado di colpire tutti gli URL dalla mia app UI tranne login e logout. Per favore fatemi sapere come posso configurare il login di sicurezza di primavera e uscire con 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> 

Grazie in anticipo

registro Network

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

Per quanto riguarda la questione CORS è interessato, si prega di aggiungere authorization e client-security-token al Access-Control-Allow-Headers header come di seguito.

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

Questo dovrebbe funzionare correttamente se il filtro CORS è configurato correttamente!

Per utilizzare l'accesso basato su AJAX in sicurezza di primavera, è possibile seguire un approccio leggermente diverso. Questo è spiegato qui:

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

Speranza che aiuta, sentitevi liberi di commentare per qualsiasi problema!

Answer 2

Ho fatto questo problema sull'applicazione AngularJS e Spring. È abbastanza semplice Basta aggiungere il filtro

public class CORSFilter extends OncePerRequestFilter { 

    private final Logger LOG = LoggerFactory.getLogger(CORSFilter.class); 

    @Override 
    protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain chain) throws ServletException, IOException { 
     res.setHeader("Access-Control-Allow-Origin", "*"); 
     res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); 
     res.setHeader("Access-Control-Max-Age", "3600"); 
     res.setHeader("Access-Control-Allow-Headers", "X-PINGOTHER,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization"); 
     res.addHeader("Access-Control-Expose-Headers", "xsrf-token"); 
     if ("OPTIONS".equals(req.getMethod())) { 
     res.setStatus(HttpServletResponse.SC_OK); 
     } else { 
     chain.doFilter(req, res); 
     }   
    } 
} 

Dal posto di angularjs spring cross-origin request blocked