Spring CORS for multipart requests: Response to preflight request doesn't pass access control check [closed]

Question

I've researched through a lot of other questions about the same problem but no solution helped. Excuse me if I missed some useful options and duplicated the resolved question.

I've got React fronend and Spring Boot backend, testing on the same host. For allowing CORS requests I've added this configuration to my server:

@Configuration
@EnableWebMvc
class WebConfig : WebMvcConfigurer {
    override fun addCorsMappings(registry: CorsRegistry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:3000")
    }
}

Everything worked fine until I've tried to send files via multipart requests. For those requests I receive this error:

Access to fetch at 'http://192.168.0.14:8080/goods/enrichFromCsv' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I'd tried to simulate the preflight OPTIONS request to my API and received all the requested headers:

All the other requests work correctly. Only those with files attached fail. Any thoughts about how can I fix it?

P.S. I don't want to disable CORS in my whole browser, I think there should be an option to allow it from the Spring Boot backend.

Answer 1

Thanks to @PraveenE, I've traced the preflight request with Firebase Dev Tools and found the problem. There was a typo in the request type (POST_BASE instead of POST), so the CORS legally rejected it.

All the other requests worked as they were sent via another method, which put the correct request type.

For those who will also face this issue - try to trace preflight requests and find the problem. Also simulating the preflight request from Postman helps to check if everything is set up correctly on your backend.