使用Fetch发送POST请求到PHP后端，$_POST无法获取数据的问题

问题场景 #

使用Fetch API向PHP后端发送JSON格式的POST请求时，PHP始终读取到空的$_POST数组；但移除JS代码让表单正常提交时，$_POST却能正确获取输入数据。

相关代码 #

表单代码 #

<form action="add_to_mailchimp.php" method="POST">
  <input type="text" name="email" placeholder="Enter your email" />
  <button type="submit">Go</button>
</form>

JavaScript代码 #

document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const payload = {
    // email: document.querySelector('[name="email"]').value,
    email: 'dpa@gmail.com', // hard code value just for example
  };
  console.log('about to submit %o', payload);
  fetch('add_to_mailchimp.php', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => {
      console.log(response);
      return response.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.log(error);
    });
});
});

PHP代码 #

<?php
  print json_encode(array('postObj' => $_POST, 'reqType' => $_SERVER['REQUEST_METHOD']));
  die;
?>

现象 #

• 使用Fetch提交后，控制台输出：

  {postObj: [], reqType: "POST"}
  

• 移除JS让表单正常提交时，PHP执行print_r($_POST)得到：

  Array
  (
      [email] => dp@gail.com
  )
  

原因及解决方法 #

PHP的$_POST数组仅自动解析**application/x-www-form-urlencoded或multipart/form-data**格式的POST数据，而你发送的是application/json格式，因此不会被解析到$_POST中。

方法1：读取原始请求体解析JSON #

修改PHP代码，直接读取请求的原始内容并解析为JSON：

<?php
$rawData = file_get_contents('php://input');
$postData = json_decode($rawData, true);
print json_encode(array('postObj' => $postData, 'reqType' => $_SERVER['REQUEST_METHOD']));
die;
?>

方法2：发送表单格式数据（无需JSON） #

如果业务不需要JSON格式，可修改JS代码发送表单兼容格式，让PHP自动解析到$_POST：

// 方式A：使用FormData自动构造表单数据
const payload = new FormData(form);
fetch('add_to_mailchimp.php', {
  method: 'POST',
  body: payload
})

// 方式B：手动构造URL编码字符串
const payload = new URLSearchParams({
  email: 'dpa@gmail.com'
});
fetch('add_to_mailchimp.php', {
  method: 'POST',
  body: payload,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

内容的提问来源于stack exchange，提问作者Daveh0