AngularJS authentication with Spring Security CORS issues

I am using the tutorials on https://spring.io/guides/tutorials/spring-security-and-angular-js to connect AngularJS app to Spring Security backend for authentication.

When I try to log in (the username and password already exist in the backend), I get the following error in browser consoles (am testing my app in Chrome, Firefox and IE, all of them give me the same error).

The error is:

XMLHttpRequest cannot load http://SERVER_URL:4444/test/user.
Response to preflight request doesn't pass access control

check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'http://localhost:3000' is therefore not allowed access.
The response had HTTP status code 401.


Code:

var auth = angular.module("Admin");

authService.service("AuthService", function($http, $rootScope)

this.login = function(credentials)
var headers = credentials ? authorization: "Basic " + btoa(credentials.username + ":" + credentials.password) : ;

$http.get("http://SERVER_URL:4444/test/user",headers:headers)
.then(function(response)
console.log("success");
$rootScope.authenticated = true;
, function()
console.log("failed");
$rootScope.authenticated = false;
);


;




);


When I access the same link in the browser, I get authenticated box and I type in the username and password and I can see the result. But I don't understand why can't I access the same link via $http() successfully.

What is the correct way to do it? I have read numerous posts and Q&As but none solves the problem. I just don't understand what is going on.

CORS

2 Answers
2

You need to register a CORS filter in your Spring Security configuration on your backend to allow the origin of your Angular app access to the backend, since it is making cross-origin requests (it's not coming from the same host and port):

@Configuration
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter

@Bean
public CorsFilter corsFilter()
final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
final CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);





Alternatively, if you are using an older version of Spring Security that does not support CorsConfiguration you can accomplish the same thing by implementing a custom filter and injecting it into your filter chain:

CorsConfiguration

@Component
public class CorsFilter implements Filter

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Headers", "*");
chain.doFilter(req, res);


public void init(FilterConfig filterConfig)

public void destroy()




@EnableWebMvc

By default, the browsers have implemented the security policy, not to execute the scripts loaded from different domains. Even if it's from the same host and different port, it will not allow as it's violates the cross domain policy.

There are many ways to overcome this issue.

Best way is to enable the CORS at the server, so that from the first response onward, the server will instruct the browsers to allow to cross the domain. Refer the link to get more http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.