Handling CORS during development Spring Boot and reactjs application - reactjs

Question

this problem is kinda new to me because I used to develop angular applications earlier but now I have reactjs as a front-end technology.
My problem is CORS. My react app works on port 3000 and my spring boot app on 8080. Adding #CrossOrigin on my controller handles the problem pretty well but is there a way to somehow configure this on the front-end side? Something like a switch that you flip when app is supposed to work locally and stop this when working in production environment?

Answer 1

Yes. You can use reverse proxy.
It’s very common problem.
See here.
http://www.pierre-beitz.eu/2017/01/24/Dealing-with-CORS-in-a-Development-Environment-Using-a-Reverse-Proxy.html
By that all requests would be going to api and will further resolve issue.
Right now on phone. Can come on lappy if you have any more questions.
Adding another solution post comment
Add the following code in your MainApplication.java
#Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("http://domain1.com");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
and map the class with #Configuration annotation