axios.delete() is giving 403 error ... however this works in POSTMAN, and axios.post method is working fine

user_10547806 0
Viewed 546

I have a REACT front-end interacting with an STS (java) backend.

DELETE function:

deleteCustomer = (someone) => {
    // eslint-disable-next-line
    let url = "http://localhost:8080/customer/" + `${someone}`
    axios.delete(url)

    .catch(function (error) {
      console.log("Deletion failed with error: " + error);
    });
  }

HTML where it's triggered:

      {this.state.customers.map(p => (

        <span onClick={() => this.deleteCustomer(p.customerid)} title="Delete Customer"><img alt="delete" className="hiddenIcon actionDelete" src={deleteHover} /></span>

        ))}

In Java back-end the delete method looks like this:

@DeleteMapping("/{customerid}")
  public void deleteCustomer(@PathVariable Long customerid) {
    customerRepository.deleteById(customerid);
  }

So when I run a DELETE type request in POSTMAN application, the record is deleted without any issue. However, trying to run the function from React front-end is giving ERROR 403 (network error) when trying to run.

I am assuming that there is some header or parameter I am missing? If AUTHORIZATION is required, how do I find my authorization key?

I tried to follow this:
axios delete method gives 403
But didn't get any resolution.

Any help is greatly appreciated - thanks.

axios reactjs java
1 Answers

This could be related with CORS, try adding the @CrossOrigin annotation to your endpoint like this:

@CrossOrigin
@DeleteMapping("/{customerid}")
public void deleteCustomer(@PathVariable Long customerid) {
    customerRepository.deleteById(customerid);
}
user_21271210
Related