PHP not reading POST data sent from JavaScript fetch

red380sl · December 21, 2023, 3:29am

I just updated my Debian system. Once back up and running I got back to work on my web app. My JavaScript code uses the fetch function to call PHP scripts, with parameters, to perform needed tasks. What used to work before I updated to Debian 12 doesn’t work now. PHP isn’t receiving the POST data. Here is a test version of my code.

window.addEventListener("load", onLoadHandler);

function onLoadHandler(){
    let string1 = "When the cows come home";
    let string2 = "Who let the dogs out?";
    let data = {"cows":string1, "dogs": string2};

    fetch("./test.php", {
        method: 'POST',
        body: JSON.stringify(data)
    })
        .then(response => response.json())
        .then(function (stringData){
            document.getElementById("text1").innerHTML = stringData["cows"];
            document.getElementById("text2").innerHTML = stringData["dogs"];
        })
        .catch(function (error){
            document.getElementById("text1").innerHTML = error;
        })
}

<?php
// ======= Debugging aids ============
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$post_json = file_get_contents('php://input');
$sessionJSON = json_decode($post_json, true);

var_dump($sessionJSON);

$c = str_replace("cows", "alpacas", $sessionJSON["cows"]);
$d = str_replace("dogs", "cats", $sessionJSON["dogs"]);

$jsonStr = array("cows"=>$c, "dogs"=>$d);
echo json_encode($jsonStr);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP Test Errors</title>
        <script type="module" src="./test.js" charset="UTF-8"></script>
</head>
<body>

<div id="text1"></div>
<br><br><br><br>
<div id="text2"></div>
<br><br><br><br>

</body>
</html>

The error messages I keep getting is the PHP variable $sessionJSON is null.

One part of my development setup that is different from what I had before is I now have the Apache Virtual Host configuration including an Alias directory, which is working. The purpose for the Alias directory is I am seeking to locate all my program file in one place (the /opt directory) and Alias them to different users. I also haven’t re-setup the home-grown TLS certificate for https.

Anyone know what could be causing the lack of communication?

Is it possible to read the http traffic?

droopsnoot · December 21, 2023, 8:52am

Does your browser have a developer console? That often has something like a “network” tab that will show you interaction between client and server, or maybe the console display will help.

Pepster64 · December 21, 2023, 11:51am

I good way to debug would to do this →

.then(response => {
    console.log(response); // Debug response
    return response.json();
})
.then(function (stringData){
    console.log(stringData); // Debug response data
    // Rest of your code
})
.catch(function (error){
    console.error(error); // Log errors
    // Rest of your error handling
})

m_hutley · December 21, 2023, 1:08pm

What happens if you var_dump $post_json instead? json_decode returning NULL indicates that what it saw wasnt properly formatted JSON.

red380sl · December 21, 2023, 3:42pm

Oh. Really.

Here is the results of changing it to var_dump($post_json) . It is now showing an empty string
/var/www/demomarket4/test.php:10:string '' (length=0)

If I replace the $sessionJSON in the lines with str_replace() – line 12 – with $post_json I get the following PHP error.

red380sl · December 21, 2023, 4:11pm

Pepster64:

I good way to debug would to do this →

.then(response => {
    console.log(response); // Debug response
    return response.json();
})
.then(function (stringData){
    console.log(stringData); // Debug response data
    // Rest of your code
})
.catch(function (error){
    console.error(error); // Log errors
    // Rest of your error handling
})

This gives me little more information that I had before. This is a Console screen capture from Firefox Developer Edition.

mabismad · December 21, 2023, 5:19pm

The console logging after the fact isn’t going to show anything, since you already know that php isn’t receiving anything it can operate on. You need to start at the top and do what @droopsnoot posted in the first reply and check the network tab in the developer tools.

Open the developer tools and go to the network tab. Reload the page to cause the requests to be made. Of interest is the content-type header and the payload for the test.php request. The content-type either needs to be text/plain or application/json so that php won’t attempt to parse the data into $_POST/$_FILES variables. The payload needs to be the json encoded data.

m_hutley · December 21, 2023, 9:53pm

Well it shows that what it is receiving is nothing, which is different from malformed data.
Also, the javascript code isnt environment specific, so you can see that the content-type of the code as written will be text/html.

Set your fetch’s Accept and Content-Type headers to application/json and try again.

[off-topic]
For what it’s worth, I really dislike the whole… ‘file’ reading php://input thing. Post variables are there for a reason. Dont know why everyone’s so deadset on not using them suddenly. Maybe i’m just lazy, but json_decode($_POST['json']) feels so much simpler to me.
[/off-topic]

system · March 22, 2024, 4:53am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.