axios提交FormData控制台有返回但PHP端接收数据为NULL问题

核心问题原因 #

• 前后端数据格式不匹配：前端提交的是FormData格式（对应multipart/form-data编码），PHP端错误使用JSON格式解析逻辑读取php://input再json_decode，必然返回NULL
• 大概率存在Axios全局请求头配置错误：如果全局给POST请求设置了固定Content-Type: application/json，提交FormData时不会自动携带multipart格式必须的boundary分隔符，会导致PHP无法解析表单内容，$_POST为空数组
• 测试逻辑误区：直接在浏览器访问PHP接口是GET请求，本身就不会携带POST数据，返回空数组/NULL是正常现象，必须通过前端POST发起请求才能测试提交逻辑
• 你看到的响应中message字段值为NULL Array ( ) Hello World是历史测试脏数据，是之前接口返回的内容被意外填充到表单输入框里随本次请求提交了，不是核心故障

修复方案 #

两种方案二选一即可，不要混合使用：

方案1：保留FormData提交（适合后续需要上传文件的场景） #

• 前端侧检查Axios配置，删除全局POST请求固定的Content-Type: application/json头，提交FormData时让浏览器自动生成带boundary的multipart/form-data请求头。注意不要手动设置Content-Type: multipart/form-data头，手动设置会丢失必须的boundary参数，直接导致PHP无法解析表单内容。原有前端提交逻辑不需要修改。
• PHP侧删除JSON解析相关逻辑，FormData格式提交的数据PHP会自动解析填充到$_POST全局变量，修正后代码如下：

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

// 直接从$_POST读取表单字段即可
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$phone = $_POST['phone'] ?? '';
$message = $_POST['message'] ?? '';

// 测试输出
var_dump($_POST);
echo "接收成功";
?>

方案2：保留PHP端JSON解析逻辑（适合纯文本表单、无文件上传场景） #

• 前端侧不需要构造FormData，直接传递JS对象给Axios，Axios会自动将对象序列化为JSON字符串并设置正确的application/json请求头，修正后提交代码如下：

const sendContact = () => {
  const data = {
    name: values.name, 
    email: values.email, 
    phone: values.phone, 
    message: values.message
  }
  axios.post(`http://localhost:8080/contactForm.php`, data)
    .then(res => {
      console.log(res.data);
    })
    .catch(err => {
      console.log(err)
    })
}

• PHP侧原有JSON解析逻辑可正常使用，不需要修改，通过json_decode(file_get_contents("php://input"), true)就能拿到完整的提交数据数组。

额外排查项 #

如果修改后仍无法接收数据，检查PHP配置项：

• post_max_size：设置值需大于本次提交的数据总大小，本地开发可设为100M
• upload_max_filesize：如果有文件上传需求，该值也需要调整到大于上传文件大小

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