Google Apps Script as Web App: problems with doPost()

Question

Ultimately I want to post some data to my App Script from my Wordpress site. This is the endpoint of one of my test deployments: https://script.google.com/macros/s/AKfycbxW3tb8htk3tm7J3YDDOf40yK17bdSryiJDkbbyqTA1eWodCw5TRZxW0vE1KMe66yR7hw/exec

My doGet and doPost, in doPost I am trying to save the request parameters into a cell for debug purpose:

function doPost(request){
   var parameters = request.parameters;
   console.log(parameters);
   var data = JSON.stringify(parameters);
   courseSheet.getRange("D" + (courseSheet.getLastRow() + 1 )).setValue(data);
   return ContentService.createTextOutput(data);
}

function doGet(e){
  var parameters = e.parameters;
  console.log(parameters);
  var data = JSON.stringify(parameters);
  return  ContentService.createTextOutput(data);
}

And this is the PHP code in WP, note that wDebug is a custom function I use to convert the object to json string and save into the log files.

$body = array(
    'name' => 'John',
    'time' => '2pm'
);
$api_url = "https://script.google.com/macros/s/AKfycbxW3tb8htk3tm7J3YDDOf40yK17bdSryiJDkbbyqTA1eWodCw5TRZxW0vE1KMe66yR7hw/exec";
$response = wp_remote_post($api_url, array(
  'headers'     => array(),
  'method' => 'POST',
  'body' => $body
));

if ( is_wp_error( $response ) ) {
  $error_message = $response->get_error_message();
  wDebug($error_message,true,true,'error.log');
  // Handle the error appropriately
} else {
  $response_body = wp_remote_retrieve_body( $response );
  // Handle the response body appropriately
}
wDebug($response_body,true,true,'responses.log');

When running the code above, the cell gets the correct value {"time":["2pm"],"name":["John"]}. However, I don't know what went wrong but the screenshot below shows what I get in responses.log file . Looks like a "400:Bad Request" has been returned.

Q1: Why isn't this error get caught by id_wp_error?

Q2: If there is a 400 error, why my doPost function correctly gets the POST body and update the cell with its value?

To further test this issue, I've tried to use javascript to post the same data to my API by executing the code below in console:

fetch(url, {
  method: 'POST',
  body: JSON.stringify({ name: 'John', time: '2pm' })
})
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error(error));

It returns {}, and the cell in my sheet also gets this {}.

$.post(url, { 
  name: "John", 
  time: "2pm" 
}, 
function(data) {
  console.log(data);
});

Then I tried jQuery as above. This time everything is fine: it returns the object in console, and the cell also gets the correct value.

I think the problem here is the header. My guess is jQuery.post probably construct a robust header by default so it is the only one that doesn't get any error. I checked with chatgpt and it says the default header for jQuery.post is

'Content-Type': 'application/x-www-form-urlencoded'

So I change my fetch code to

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John&time=2pm'
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));

This time it works fine. Corrent value returns and the cell also gets the correct value.

Then I go to my PHP and change it to

$body = array(
    'name' => 'John',
    'time' => '2pm'
);
$api_url = "https://script.google.com/macros/s/AKfycbxW3tb8htk3tm7J3YDDOf40yK17bdSryiJDkbbyqTA1eWodCw5TRZxW0vE1KMe66yR7hw/exec";
$response = wp_remote_post($api_url, array(
  'headers'     => array(
    'Content-Type' => 'application/x-www-form-urlencoded'
  ),
  'method' => 'POST',
  'body' => $body
));

However, the response still says 400: Bad Request error, although the cell still gets the right value.

I am stuck at this point. My guess is I missed something in the header when sending the POST request via PHP.

Q3: what could be missing?

Not only this, according to chatgpt, I probably have to set Mimetype and Header in my doPost so that it can work well with my external request senders. This adds to the complexity of the whole issue. So

Q4: Should I consider setting mimeType and Header when I just want my API to return json data? What if I want my API to return an image blob?