Getting a CORS issue when posting data from frontend(React) - reactjs

Question

I'm posting data from react to spring boot backend using axios. Please refer the below react code.
const handleSubmit = (e) =>{
e.preventDefault()
alert( "Username "+ username + " Password "+password);
axios.post('http://localhost:8080/sign-up',{
username:username,
password:password})
};
Below is my spring code.
#PostMapping("/sign-up")
public String signUp(#RequestBody User user) {
if(userRepository.findByUsername(user.getUsername())==null) {
Set<Role> roles= new HashSet<>();
Role role= roleRepository.findByName("USER");
roles.add(role);
user.setRoles(roles);
user.setPassword(bcryptEncoder.encode(user.getPassword()));
userRepository.save(user);
return "Success";
}
else{
return "Username Already Exsist";
}
}
When I post data from front end i'm getting below response in the browser console.
Access to XMLHttpRequest at 'http://localhost:8080/sign-up' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
xhr.js:178 POST http://localhost:8080/sign-up net::ERR_FAILED
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:83)
I've inserted following line in the controller of the spring boot.
#CrossOrigin(origins = "http://localhost:3000")
But the above solution didn't work. I suspect during the post call option call is happening to check the resource and in that case only this cors issue is occuring. Appreciate any input to this issue.

Answer 1

I had a similar issue recently.
I got a first step further by removing spring-boot-starter-security from my POM temporarily, because it was blocking the call giving unauthorized. So I figured out that that was my problem. I had to configure CORS for Spring security and then I got it to work. Apologies for the vague answer, but I hope it can help you look in another direction that could help you.

Answer 2

I have found the solution for the above problem. This cors issue is coming when there is a communication happening between different domains. So I have added below line in the configure() method of SecurityConfig class.
http.cors();
Then I have implemented the following CustomCorsFilter class.
#Component
public class CustomCorsFilter extends OncePerRequestFilter {
#Override
protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Allow, authorization, content-type, xsrf-token");
httpServletResponse.addHeader("Access-Control-Expose-Headers", "xsrf-token");
if ("OPTIONS".equals(httpServletRequest.getMethod())) {
httpServletResponse.setStatus(HttpServletResponse.SC_OK);
} else {
filterChain.doFilter(httpServletRequest, httpServletResponse);
}
}
}
Now there is no cors issue.