使用Fetch向PHP传递表单数据时无法获取数据的问题

一、FormData格式发送（适配含文件或传统表单场景） #

前端React代码 #

// 表单提交处理函数示例
const handleSubmit = async (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append('username', username); // username为你的表单状态变量
  // 其他字段按同样方式append

  try {
    const response = await fetch('/your-php-api.php', {
      method: 'POST',
      body: formData
      // 无需手动设置Content-Type，FormData会自动生成正确的multipart/form-data请求头
    });
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

后端PHP代码 #

<?php
// 直接通过$_POST获取字段，注意键名要和前端append的完全一致
$username = $_POST['username'] ?? null;
echo json_encode(['username' => $username]);
?>

二、JSON格式发送（纯数据场景更简洁） #

前端React代码 #

const handleSubmit = async (e) => {
  e.preventDefault();
  const userData = {
    username: username // 对应表单状态变量
    // 其他字段按需补充
  };

  try {
    const response = await fetch('/your-php-api.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json' // 必须显式设置此请求头
      },
      body: JSON.stringify(userData)
    });
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

后端PHP代码 #

<?php
// 读取原始请求体并解析JSON
$rawInput = file_get_contents('php://input');
$userData = json_decode($rawInput, true);
// 校验解析结果，避免JSON格式错误导致空值
$username = isset($userData['username']) ? $userData['username'] : null;
echo json_encode(['username' => $username]);
?>

三、必查坑点 #

• 字段名不匹配：前端传递的键名（FormData的append参数、JSON属性名）必须和后端读取的键名完全一致，大小写敏感。
• PHP配置限制：检查php.ini中的post_max_size、upload_max_filesize，若数据量超过限制会导致$_POST为空；同时确保enable_post_data_reading设为On。
• 重定向丢失数据：若PHP端点存在301/302重定向，POST请求会被转为GET，导致请求体丢失。可通过浏览器开发者工具Network面板查看请求状态码，确认无跳转。
• CORS跨域问题：前后端域名不同时，PHP需添加CORS响应头：

header('Access-Control-Allow-Origin: 你的前端域名');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

• 浏览器缓存干扰：测试时可在开发者工具中勾选"Disable cache"，避免OPTIONS请求缓存导致的异常。

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