Why I am getting XMLHttpRequest cannot load - Preflight response is not successful Error with Delete method only?

Question

PHP resource file:

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

require_once ("center_service.php");

$data = json_decode(file_get_contents("php://input"));
$method = $_SERVER['REQUEST_METHOD'];

if (!isset($routes[2])) {
    $sql = "SELECT * FROM centers;";
    Center::readCenter($sql);
} else if (isset($routes[2]) && is_numeric($routes[2]) && $method === "GET") {
    $sql = "SELECT * FROM centers WHERE id='$routes[2]';";
    Center::readCenter($sql);
} else if (isset($routes[2]) && is_numeric($routes[2]) && $method === "DELETE") {
    Center::deleteCenter($routes[2]);
}
else {
    header('HTTP/1.0 404 Not Found');
    require '404.php';
}

Angular service file:

readonly ROOT_URL = 'http://localhost/ecdweb/api/index.php';

getCenters(): Observable<Center[]> {
  return this.http.get<Center[]>(this.ROOT_URL + '/centers');
}
deleteCenter(id: number): Observable<{}> {
  return this.http.delete(this.ROOT_URL + '/centers/' + id);
}

The get method is working and return results but it doesn't work with delete method. If it's because of CORS, then why the get method is working?

Console Log:

Network:

Related Questions:

“XMLHttpRequest cannot load file:///… Preflight response is not successful” error

Preflight response is not successful

Express server and Axios CORS Preflight response is not successful

is the problem persisting with your modification on Access-Control-Allow-Methods header? (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods) — Pierre Mallet, Feb 13 '18 at 16:47
@PierreMallet not sure what is causing the problem. I have included all the methods in the `Access-Control-Allow-Methods` but it only works with GET not DELETE. — Maihan Nijat, Feb 13 '18 at 16:50

Pierre Mallet · Accepted Answer · 2018-06-11T09:29:06.047

Ok, I think it is because if the method is different from GET or DELETE you return a 404. So when the preflight request is handled ( verb OPTIONS ) you return a 404.

Here is an example of CORS in PHP (here)

the main topic is :

The important point here is that the API script needs to recognise when an initial OPTIONS request has been received, and to return the appropriate access control headers in that case (and nothing more). Following this, the browser then initiates a second request in which the real work is done.

In your specific case I think the code should be :

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: X-Requested-With, content-type, access-control-allow-origin, access-control-allow-methods, access-control-allow-headers');
    exit;
}

If you want to enable the cors more globally you can just add

header('Access-Control-Allow-Origin: *');

in your php script (see here)

I insert on http post request header but not working. The example link is also dead — Jeff Bootsholz, Jun 11 '18 at 08:10

Why I am getting XMLHttpRequest cannot load - Preflight response is not successful Error with Delete method only?

1 Answers1