Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Java Backend with CrossOrigin("*") annotation

Question

I know that there are a lot of questions regarding this topic, but after a few hours of trying multiple fixes I haven't been able to make it work.

@CrossOrigin(origins = "*", allowedHeaders = "*")
@RestController
@RequestMapping("/api/bag")
public class RestBagController {

My controller currently accepts any cross origin requests.

The issue seems to be with this particular method that consumes multipart/form-data

@PostMapping(consumes = "multipart/form-data", path = {"/image"})
public ResponseEntity<?> saveImages(@RequestParam("file") MultipartFile[] files) {

Finally, my ajax request

 var blobFile = $("#serialcodefile").prop('files')[0];
 var formData = new FormData();
 formData.append("serialcodefile", blobFile, "serialCode");
        

$.ajax({
    url: "http://localhost:8080/api/bag/image",
    type: "POST",
    data: formData,
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    processData: false,
    async: true,
    success: onSuccess,
});

My backend is hosted in localhost:8080 and the frontend on localhost:5501.

Also I'm not sure if relevant, but once I press the submit button on the form, I make 2 POST requests.

• To: "http://localhost:8080/api/bag/"
• To:"http://localhost:8080/api/bag/image"

Answer 1

From jquery docs - contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')

Here is the link to docs - https://api.jquery.com/jquery.ajax/ Search for ContentType here.

Can you try by removing headers and instead add ContentType:false . Hope this works!!

$.ajax({
    url: "http://localhost:8080/api/bag/image",
    type: "POST",
    data: formData,
    ContentType: false,
    processData: false,
    async: true,
    success: onSuccess,
});

Answer 2

If you use Chrome try to disable CORS like there or run in another browser, because Chrome has built-in protection from this.