While I was collaborating with frontend (React.js), we have experienced the error regarding Cross Origin Resource Sharing (CORS) whenever the front end tried to reach to the server.
What is CORS?
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
In order to connect the backend with frontend, I had to do some research and came across few options that would allow this CORS problem.
My solution was to use WebMvcConfigurer.
@Bean
public WebMvcConfigurer corsConfigurer(){
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:3000");
}
};
}By adding localhost:3000 to the allowedOrigins method, it solved the CORS problem happening from the frontend.
