Spring JPA Delete Axios, React JS: CORS Error

I am trying to create a delete function that will delete my data using React, which will make an Axios call to my API which will proceed to remove the data from the DB.

I managed to make a somewhat working copy eventually, but why does my original code hit a CORS error?

Function Call

function deleteProposal(refNum) {
  console.log('Delete Proposal Clicked', refNum);
  const apiData = {
    refNum: refNum,
  };
  AxiosCall.deleteProposal(JSON.stringify(apiData)).then((result) => {
    console.log('deleteProposal Result: ' + result);
    console.log('deleteProposal Result.data: ' + result.data);
  });
}

Axios Call

const deleteProposal = (data) => {
  console.log('delete Proposal');
  return axiosHTTP.delete('/deleteProposal', data);
};

Spring API

@CrossOrigin
@ResponseBody
@DeleteMapping(value="deleteProposal", consumes = "application/json")
public HttpStatus deleteProposal(@RequestBody HashMap<Object,Object> selectedProposal) {
    System.out.println("deleteProposal: "+selectedProposal);
    return HttpStatus.OK;
}

Is it because this isn't the right way to do it in the first place, or is it due to something else?

Please note that I am still relatively new to all the technologies I'm using.