Spring boot Oauth2 + Angular CORS problem - spring

Question

I am new in making auth services. When i try get acces token form Postman everything working fine. But when i use Angular i got this error:
Access to XMLHttpRequest at 'localhost:8082/oauth/token' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
My config is:
#SpringBootApplication
#EnableEurekaClient
#EnableWebSecurity
public class AuthMsApplication extends WebSecurityConfigurerAdapter {
public static void main(String[] args) {
SpringApplication.run(AuthMsApplication.class, args);
}
}
#Component
#Order(Ordered.HIGHEST_PRECEDENCE)
#WebFilter("/*")
public class CorsFilter implements Filter {
#Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
final HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Allow-Headers", "content-type, x-requested-with, authorization");
response.setHeader("Access-Control-Max-Age", "3600");
if ("OPTIONS".equalsIgnoreCase(((HttpServletRequest) req).getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
chain.doFilter(req, res);
}
}
}
#EnableAuthorizationServer
#Configuration
public class OAuth2Config extends AuthorizationServerConfigurerAdapter {
private static final String READ = "read";
private static final String WRITE = "write";
private static final String PASSWORD = "password";
private static final String REFRESH_TOKEN = "refresh_token";
#Value("${client.id}")
private String clientId;
#Value("${client.secret}")
private String clientSecret;
#Value("${tokenSignature}")
private String tokenSignature;
#Value("${accessTokenValiditySeconds}")
private int accessTokenValiditySeconds;
#Value("${refreshTokenValiditySeconds}")
private int refreshTokenValiditySeconds;
private final AuthenticationManager authenticationManager;
private final UserDetailsService customDetailsService;
public OAuth2Config(#Qualifier("authenticationProviderImpl") AuthenticationManager authenticationManager,
UserDetailsService customDetailsService) {
this.authenticationManager = authenticationManager;
this.customDetailsService = customDetailsService;
}
#Bean
public JwtAccessTokenConverter tokenEnhancer() {
JwtAccessTokenConverter converter = new JwtAccessTokenConverter();
converter.setSigningKey(tokenSignature);
return converter;
}
#Bean
public JwtTokenStore tokenStore() {
return new JwtTokenStore(tokenEnhancer());
}
#Override
public void configure(AuthorizationServerEndpointsConfigurer endpoints) {
endpoints.authenticationManager(authenticationManager)
.tokenStore(tokenStore())
.accessTokenConverter(tokenEnhancer())
.userDetailsService(customDetailsService);
}
#Bean
public PasswordEncoder encoder() {
return new BCryptPasswordEncoder();
}
#Override
public void configure(AuthorizationServerSecurityConfigurer security) {
security.tokenKeyAccess("permitAll()").checkTokenAccess("isAuthenticated()");
}
#Override
public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
String encodedClientSecret = encoder().encode(clientSecret);
clients.inMemory()
.withClient(clientId)
.secret(encodedClientSecret)
.scopes(READ, WRITE)
.authorizedGrantTypes(PASSWORD, REFRESH_TOKEN)
.accessTokenValiditySeconds(accessTokenValiditySeconds)
.refreshTokenValiditySeconds(refreshTokenValiditySeconds);
}
}
Any searching info not working as global CORS. One thing is working it's
#CrossOrigin(origins = "*", allowedHeaders = "*")
But i can put this on my own controllers, and i dont know how set it for oauth/token endpoint.
this official doc solution doesnt work.
https://docs.spring.io/spring-security/site/docs/4.2.x/reference/html/cors.html
filter doesnt work too.

Answer 1

After 3 days i found solution. At firs i remove all filters in my auth service. Second i add this props in my gateway service:
cloud:
gateway:
globalcors:
corsConfigurations:
'[/**]':
allowedOrigins: "*"
allowedHeaders:
- content-type
- x-requested-with
- Authorization
allowedMethods:
- GET
- POST
- OPTIONS
- DELETE
- PUT
You just need add global headers for all your services in gateway props, also this can combine with filters in services for more flexible settings.
I hope this can help for some one to save 3 days)

Answer 2

This is a common issue everywhere,
since the origins are different it protects the injection of different origins.
Solution :
1) if you are using for dev then enable CORS on chrome (Extension) (POSTMAN do it by default)
2) In production, the angular application where it is hosted should white list you API URL,
3) third set cors allow origin headers