CORS errors in PHP backend consumed by Reactjs - php

Question

When I make a POST request I get the error
Access to XMLHttpRequest at 'http://localhost/vla-php/room/create.php' 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.
on the console.
Using Postman works fine, however, trying to consume it from a React frontend results in the above error.
I already have CORS enabled by setting access control to allow all origins (*)
.htaccess is an empty file. I doubt if that would be a hinderance.
The PHP code looks like so;
<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
// get database connection
include_once '../config/database.php';
// instantiate product object
include_once '../objects/room.php';
$database = new Database();
$db = $database->getConnection();
$room = new Room($db);
// get posted data
$data = json_decode(file_get_contents("php://input"));
// make sure data is not empty
if(
!empty($data->name) &&
!empty($data->category) &&
!empty($data->type)
){
// set product property values
$room->name = $data->name;
$room->category = $data->category;
$room->type = $data->type;
// create the product
if($room->create()){
// set response code - 201 created
http_response_code(201);
// tell the user
echo json_encode(array("message" => "Room was created."));
}
// if unable to create the product, tell the user
else{
// set response code - 503 service unavailable
http_response_code(503);
// tell the user
echo json_encode(array("message" => "Unable to create room."));
}
}
// tell the user data is incomplete
else{
// set response code - 400 bad request
http_response_code(400);
// tell the user
echo json_encode(array("message" => "Unable to create room. Data is incomplete."));
}
?>

Answer 1

Changing the headers to
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];
if ($method == "OPTIONS") {
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");
header("HTTP/1.1 200 OK");
die();
}
Worked