CORS preview feed failed with Spring Security
I am creating an Angular 2 app with a Spring backend. I have been trying to resolve a CORS pre-field issue for several days. According to this thread , it should work with a CORS filter like this:
@Component
public class CorsFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "authorization, content-type, xsrf-token");
response.addHeader("Access-Control-Expose-Headers", "xsrf-token");
if ("OPTIONS".equals(request.getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
filterChain.doFilter(request, response);
}
}
}
@Configuration
@EnableResourceServer
public class ResourceServerConfiguration extends ResourceServerConfigurerAdapter {
@Override
public void configure(HttpSecurity http) throws Exception {
http
.addFilterBefore(new CorsFilter(), ChannelProcessingFilter.class)
.headers()
.frameOptions().disable()
.and()
.authorizeRequests()
.antMatchers("/", "/home", "/register", "/login").permitAll()
.antMatchers("/cottages").authenticated();
}
}
Angular frontend:
import {Injectable} from '@angular/core';
import {Headers, Http} from "@angular/http";
import {AppSettings} from "../app.settings";
import { URLSearchParams } from '@angular/http'
import {User} from "../_models/_index";
import {Observable} from "rxjs";
@Injectable()
export class AuthenticationService {
private headers = new Headers({'Content-Type': 'application/json'});
private tokenHeaders = new Headers({
'Content-Type': 'application/json',
'client_id': 'xxx',
'client_secret': 'xxx'});
constructor(private http: Http) {
}
login(user: User) {
let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', user.username);
urlSearchParams.append('password', user.password);
let body = urlSearchParams.toString();
return this.http.post(AppSettings.getApiUrl() + "oauth/token", body, { withCredentials: true, headers: this.tokenHeaders })
.map((responseData) => {
return responseData.json();
})
.map((item: any) => {
return new User(item);
})
.catch((error: any) => Observable.of(error.json().error || 'Server error'));
}
}
I tried a different configuration I found on this and other sources from the Spring docs.
I always get this error message:
Cross-origin request blocked: Same origin policy prevents reading the remote resource at http: // localhost: 8080 / oauth / token . (Reason: CORS preview channel failed).
A simple CORS request to my own controller, for example for user registration, works fine.
Can someone explain to me what I am doing wrong? Is there a bug in the Java or Typescript code?
Edit:
Authorization server configuration:
@Configuration
@EnableAuthorizationServer
public class AuthorizationServerConfiguration extends AuthorizationServerConfigurerAdapter {
@Autowired
private AuthenticationManager authenticationManager;
@Autowired
private PasswordEncoder passwordEncoder;
@Override
public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
endpoints.authenticationManager(authenticationManager);
}
@Override
public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
clients.inMemory().withClient("my-trusted-client").authorizedGrantTypes("client_credentials", "password")
.authorities("ROLE_CLIENT", "ROLE_TRUSTED_CLIENT").scopes("read", "write", "trust")
.resourceIds("oauth2-resource").accessTokenValiditySeconds(5000).secret("xxx");
}
@Override
public void configure(AuthorizationServerSecurityConfigurer security) throws Exception {
security.checkTokenAccess("isAuthenticated()");
}
}
source to share
Finally, I have a solution for my problem. There were several bugs on both sides (Angular / Java Spring Boot, Security). Here I will write my working code and explain it. I'll start with Backend:
@Configuration
@EnableWebSecurity
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {
@Override
public void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/", "/users").permitAll().anyRequest()
.authenticated()
.and()
.csrf().disable()
}
}
According to spring.io tutorials, WebSecurityConfiguration is the best choice for my job - it will work with ResourceServerConfiguration as well. To be honest, I don't know what the difference is (when I should use this and when the other).
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {
public SimpleCorsFilter() {
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, content-type");
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
chain.doFilter(req, res);
}
}
@Override
public void init(FilterConfig filterConfig) {
}
@Override
public void destroy() {
}
}
Without this CorsFilter, I only get OPTIONS responses from the server.
I am not modifying the AuthorizationServerConfiguration that I posted above.
In fact, most of the bugs were on the Angular / Frontend side. This works for me:
@Injectable()
export class AuthenticationService {
private headers = new Headers({'Content-Type': 'application/json'});
private auth64 = btoa("my-trusted-client:secret");
private tokenHeaders = new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic '+this.auth64
});
constructor(private http: Http) {
}
login(user: User) {
let body = new URLSearchParams();
body.append('grant_type', 'password');
body.append('username', user.username);
body.append('password', user.password);
return this.http.post(AppSettings.getApiUrl() + "oauth/token", body, {headers: this.tokenHeaders})
.map(data => {
console.log("it works!");
}, error => {
console.log(error.json());
});
}
Display was previously a problem. This always resulted in a CORS task before the flight. I don't get a preflight error with this mapping - even if I'm not using a CORS filter, but you need a CORS filter to get something else than OPTIONS responses from the server.
Please confirm this, I got the following error message (in the JSON response): "Full authentication is required to access this resource"
To fix the problem, I took the following steps:
- change content type to application / x-www-form-urlencoded (important for oauth2)
- remove client_id / client_secret headers
- add authorization headers
- encode my client_id / client_secrect values ββusing Base64 (btoa)
- add encoded values ββto my authorization header
There may be other / better ways to fix these problems, but this code works great for me - and maybe it helps someone else here :-)
source to share
You set withCredentials
in true
in your request, but you don't see it Access-Control-Allow-Credentials
in the preflight response. See here about the title.
return ...withCredentials: true, headers: this.tokenHeaders })
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "authorization, content-type, xsrf-token");
response.addHeader("Access-Control-Expose-Headers", "xsrf-token");
// add this
response.setHeader("Access-Control-Allow-Headers", "true");
I noticed that you added a few other heads to your query, for example client_id
, but you didn't add them to Access-Control-Allow-Headers
.
source to share