DELETE request is blocked by CORS with fetch API. It works with Postman

I have a React application that retrieves information from a PHP API. I have implemented GET and POST requests for adding new Articles in the database that is handled by the PHP API, but when trying to implement the DELETE request I get the error below:

Access to fetch at 'http://127.0.0.1/test-api/index.php/projects/18' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

The call of the DELETE is here:

const uri = apiUri + "/projects/" + projectId;
        fetch(uri, {
            method: "DELETE"
        })
            .then((response) => response.text())
            .catch((error) => console.log("error", error));

apiUri holds the value your texthttp://127.0.0.1/test-api/index.php`.

I do not think that the problem has to do with anything more than the CORS settings of the PHP API, therefore I will just upload only the part of the requires at the index.php.

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Accept");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Max-Age: 3600");

I include an image from the console, displaying the network/headers information.

network headers information

When I created the service and tested it using Postman it worked fine. Returned Status 204 and deleted the given ID from the database. I have also tried with both the local IP address "127.0.0.1" and "localhost" values. Also, I have tried including different headers in the request that I perform.

I tried to include only the necessary data to help me track this problem down. If you need any more information feel free to mention and I will provide it.

Good thing to mention is that I also tried axios (just in case the problem was something dumb with fetch API) but the result was exactly the same.

Postman provides a query generator for a request that it makes. The code that it provides is displayed below:

var requestOptions = {
  method: 'DELETE',
  redirect: 'follow'
};

fetch("http://localhost/test-api/index.php/projects/19", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Of course, this code does not work when executed from the react app.

As Professor Abronsius mentioned in the comment to the initial post. The problem was that the server was not handling OPTIONS requests. The browser just before sending the DELETE request to the server it sends an OPTIONS request and it requires a 200 OK response in order to continue to the actual DELETE request. Since, server was not handling OPTIONS requests the browser was not receiving the correct answer to continue with the DELETE call.

After adding in my PHP server the below code, the issue was resolved. Note that the same thing applies to PUT requests as well.

if ($_SERVER["REQUEST_METHOD"] === 'OPTIONS') {
    header('HTTP/1.1 200 OK');
    exit();
} 

Thank you all for the fast response and the help!