php - $_POST is empty when axios send POST request CORS

Question

When I send POST request with json data in React app to PHP server, $_POST is empty. And also php://input doesn't work.

I tried with following code.

PHP server side:

if($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Allow-Headers: Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization');
    header('Access-Control-Max-Age: 1000');
    header("Content-Length: 0");
    header("Content-Type: text/plain");
} else if($_SERVER['REQUEST_METHOD'] == "POST") {
    echo "Checking case1:
";
    echo "<br/>";
    $data = json_decode(file_get_contents('php://input'), true);
    var_dump($data);
    echo "<br/>";
    echo "Checking case2:
";
    echo "<br/>";
    var_dump($_POST);
}

React side code:

axios.post(
   'https://xx.xx.com/index2.php',
   {
     member: id
   },
   {
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
       'Access-Control-Allow-Origin': '*'
           },
     withCredentials: true
   }
)

PHP server is running on CloudFlare. I wonder if this is related with Cloudflare's cache process or not.

I hope any helps, Thank you in advance.

Answer 1

Use headers as below

It works for me on PHP

headers: {
              Accept: "application/json",
              "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }