Getting $_POST variable as empty while getting everything correct with php://input-CodePudding

I have created a React application from which I am calling my server built on PHP.

The following is how I call my PHP file:

const requestOptions = {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: JSON.stringify({ name, username, password }),
};
console.log(requestOptions);

fetch('http://localhost/crud/requests/signup.php', requestOptions)
  .then(res => res.json())
  .then(data => console.log(data));

Here is what I have in the PHP file:

if (isset($_POST) && !empty($_POST)) {
  // do something
}

When I print the $_POST variable, I get an empty array. Even the $_RESPONSE is empty.

But when I tried to print the input stream like this:

print_r(file_get_contents('php://input'));

Everything seems to be fine. Can anyone explain why does this happen? I tried to read it in the documentation & looked up on some forums and blogs but wasn't satisfied with the answers.

CodePudding user response：

PHP’s built-in form support is only able to parse application/x-www-form-urlencoded forms and multipart/form-data forms. What you are actually sending is a JSON-serialized object, with the incorrect MIME type of application/x-www-form-urlencoded.

To actually send an application/x-www-form-urlencoded form, use URLSearchParams instead of JSON.stringify:

fetch('http://localhost/crud/requests/signup.php', {
  method: 'POST',
  body: new URLSearchParams({ name, username, password }),
})
.then(res => res.json())
.then(data => console.log(data));

There is no need to set Content-Type explicitly in this case: the browser will do that automatically. To send a multipart/form-data payload (which you may need to do if you want to upload larger files), use a FormData object instead.

If you want to send JSON after all, you should send it with the correct MIME type in the header, application/json. On the PHP side, you will be resigned to parsing the payload manually using json_decode.

CodePudding user response：

You should get the Data back like this if you are sending JSON also use headers to confirm its the right mime type

    // Get raw posted data
    $data = json_decode(file_get_contents("php://input"));   

    print_r($data);

Example :headers

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Access-Control-Allow-Headers,Content-Type,Access-Control-Allow-Methods, Authorization, X-Requested-With');
header('X-Requested-With: XMLHttpRequest');
header('Accept: application/json');

Also sending Data as an AjaxXHR request means that the accepting PHP file works similar to a rest api that acts separate from PHP file sending the request . view it as a separate application so session data is not carried through nor you application security . careful with bots injecting JSON into you API with XHR requests