Can not delete database entry with PHP, with DELETE request sent from REACT

Question

I am trying to delete database entry with DELETE http request sent from axios in REACT.

    function Delete() {
        const form = new FormData();
        for (var i = 0; i < selected.length; i++) {
            form.append(i, selected[i]);
          }
        console.log(form)
        axios.delete(url, form)
        navigate(`/`)
    }

As you can see here, I iterate over "selected" which is an array and assign keys in the form as numbers. For example first key in form is 1 with first "selected" value and so on. Then comes the PHP code.

header('Access-Control-Allow-Origin: http://localhost:3000');
header("Access-Control-Allow-Methods: GET, POST, DELETE");
$servername = "localhost";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password, 'commerce');
$method = $_SERVER['REQUEST_METHOD'];
switch ($method) {
  case "DELETE":
    parse_str(file_get_contents("php://input"), $_DELETE);
    for ($i = 0; $_DELETE; $i++) {
      $sku = $_DELETE[$i];
      $delete = $conn->prepare("DELETE FROM baseinfos WHERE sku='$sku'");
      $delete->execute();
    }
    break;

Here I am supposed to get the values of DELETE form, iterate over key values (which are numbers and iteration should work) and delete the corresponding entries in the database. Nothing happens, not even an error is thrown. What should I do?

Answer 1

Bodies on DELETE requests are not a good idea and generally should be avoided. The purpose of a DELETE request is to delete the resource identified by the URL you are using.

In your case, it looks like you want to define a generic operation that deletes a number of different items. POST is more appropriate for this.

Servers and clients may drop DELETE request bodies because DELETE request bodies are not intended to be meaningful.

From the latest HTTP specification:

Although request message framing is independent of the method used, content received in a DELETE request has no generally defined semantics, cannot alter the meaning or target of the request, and might lead some implementations to reject the request and close the connection because of its potential as a request smuggling attack (Section 11.2 of [HTTP/1.1]). A client SHOULD NOT generate content in a DELETE request unless it is made directly to an origin server that has previously indicated, in or out of band, that such a request has a purpose and will be adequately supported. An origin server SHOULD NOT rely on private agreements to receive content, since participants in HTTP communication are often unaware of intermediaries along the request chain.

https://www.rfc-editor.org/rfc/rfc9110.html#name-delete

Answer 2

The first problem is that the signature for axios.delete() is

axios.delete(url[, config])

If you want to send a request body, you need to do so in the config object's data property.

Secondly, sending FormData in the request body uses content-type: multipart/form-data which is not the format parse_str() works with.

Parses string as if it were the query string passed via a URL

I would highly recommend using JSON for this instead. Simply send the selected array directly

axios.delete(url, { data: selected });

Axios will encode this as JSON and set the appropriate content-type: application/json header automatically.

To read this on the PHP side, use the following

$skusToDelete = json_decode(file_get_contents('php://input'));
$stmt = $conn->prepare('DELETE FROM baseinfos WHERE sku = ?');
$stmt->bind_param('s', $sku);
foreach ($skusToDelete as $sku) {
    $stmt->execute();
}

Note that I've used bound SQL query parameters which are a lot safer. You also only need prepare a query statement and bind parameters once. It can then be executed in a loop.