AngularJS spring security login / logout using Cross-Origin Resource Sharing (CORS)

Question

Problem statement: my UI application runs on project 9000 (grunt project) and my spring server boot project is running on port 8421. I can hit all the URLs from my user interface except login and logout. Please let me know how to configure spring security login and logout using 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> 

Thank you in advance

Network log

 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

Regarding the CORS issue, add authorization and client-security-token in the Access-Control-Allow-Headers header , as shown below.

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

This should work correctly if your CORS filter is configured correctly!

To use AJAX-based login in spring security, you can take a slightly different approach. This is explained here:

• Spring security 3 Ajax login - access to secure resources
• Implement Ajax Authentication

Hope this helps, feel free to comment on any issue!

Answer 2

I made this problem in an AngularJS and Spring application. It is pretty simple. Just add a filter.

 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); } } } 

Cross origin request blocked from angularjs Spring post