本文详解 React 前端通过 fetch 向本地 PHP 后端（如 requests.php）发送 POST 请求时常见的三大问题：表单默认提交导致页面跳转、请求体未序列化、CORS 配置缺失，并提供完整可运行的修复方案。
本文详解 react 前端通过 `fetch` 向本地 php 后端（如 `requests.php`）发送 post 请求时常见的三大问题：表单默认提交导致页面跳转、请求体未序列化、cors 配置缺失，并提供完整可运行的修复方案。
在 React 项目中集成 PHP 后端进行数据交互是初学者常见的实践路径，但极易因前后端协作细节疏漏而失败。你遇到的 NetworkError 和地址栏意外刷新（如 ?company=xxx&person=xxx），并非网络不通，而是典型的表单默认行为 + 请求配置错误 + CORS 拦截三重叠加问题。下面将逐层拆解并给出生产级解决方案。
✅ 一、阻止表单默认提交（关键第一步）
React 中 <form></form> 标签会触发浏览器原生提交行为（GET 请求 + URL 参数拼接），导致页面刷新、状态丢失，并完全绕过你的 handleSubmit 逻辑。必须显式调用 event.preventDefault()：
handleSubmit = async (event) => {
event.preventDefault(); // ? 必加！阻止默认表单提交
const date = new Date();
const headers = {
'Content-Type': 'application/json',
};
const requestBody = {
created: date.toISOString(), // 推荐使用 ISO 字符串而非 Date 对象
employee: {
company: this.state.company,
person: this.state.person,
}
};
try {
const response = await fetch('http://localhost:80/your-site/src/php/requests.php', {
method: 'POST',
headers: headers,
body: JSON.stringify(requestBody), // ? 必须序列化为字符串
mode: 'cors', // 显式声明 CORS 模式
cache: 'no-cache',
referrerPolicy: 'no-referrer',
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
console.log('Success:', result);
} catch (error) {
console.error('Submission failed:', error);
}
};⚠️ 注意：
<button></button>在<form></form>内默认为type="submit"，务必加event.preventDefault()；也可直接移除<form></form>标签，改用div包裹输入控件，彻底规避表单语义干扰。
✅ 二、PHP 端正确处理 CORS 与请求体
前端 fetch 的 Content-Type: application/json 要求 PHP 必须能解析 JSON 请求体（$_POST 仅支持 application/x-www-form-urlencoded 或 multipart/form-data）。因此需手动读取原始输入流，并严格按顺序设置响应头：
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
立即学习“PHP免费学习笔记（深入）”；
<?php
// requests.php —— 必须放在文件最顶部（任何输出前）
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
// 预检请求（Preflight）响应
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
http_response_code(200);
exit;
}
// 主要响应头（同样必须在任何 echo/print 前）
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');
// 解析 JSON 请求体
$input = file_get_contents('php://input');
$data = json_decode($input, true);
if (json_last_error() !== JSON_ERROR_NONE) {
http_response_code(400);
echo json_encode(['error' => 'Invalid JSON']);
exit;
}
// ✅ 此时 $data 包含前端发送的完整对象
$company = $data['employee']['company'] ?? '';
$person = $data['employee']['person'] ?? '';
$created = $data['created'] ?? date('c');
// 示例：记录日志（确保目录有写权限）
file_put_contents('/tmp/react_php_log.txt',
"[$created] Company: $company | Person: $person\n",
FILE_APPEND | LOCK_EX
);
// 返回成功响应
echo json_encode([
'status' => 'success',
'received' => $data
]);
?>? 关键点：
Access-Control-Allow-Origin: *必须在 所有输出之前（包括空格、BOM）；- 使用
file_get_contents('php://input')读取原始 JSON，而非依赖$_POST；- 显式处理
OPTIONS预检请求，否则现代浏览器会直接拦截；- 使用
http_response_code()明确状态码，便于前端判断。
✅ 三、路径与服务部署建议
- ❌ 错误路径：
/src/php/requests.php（这是相对前端构建路径，PHP 并不在此处运行）； - ✅ 正确路径：
http://localhost:80/your-project/src/php/requests.php（指向 Web 服务器实际托管的 PHP 文件）； - 推荐使用标准 Web 服务器（如 Apache/Nginx）托管 PHP，而非直接访问文件系统；
- 开发阶段可启用 PHP 内置服务器：
php -S localhost:8000 -t ./src/php/，然后前端请求http://localhost:8000/requests.php。
总结：三步排错清单
| 问题类型 | 表现 | 修复动作 |
|---|---|---|
| 表单干扰 | 地址栏刷新、参数追加 |
event.preventDefault() + 移除或禁用 <form></form>
|
| 请求体错误 |
NetworkError / 400 |
JSON.stringify() + Content-Type: application/json
|
| CORS 拦截 | 浏览器控制台报 CORS 错误 | PHP 顶部设 Access-Control-* 头 + 处理 OPTIONS
|
遵循以上方案，即可稳定实现 React ↔ PHP 的本地开发联调。记住：前端负责正确构造请求，后端负责安全解析与响应，CORS 是桥梁而非障碍。
