如何在 React 中正确调用本地 PHP 接口实现跨域数据提交-php教程-PHP中文网

如何在 React 中正确调用本地 PHP 接口实现跨域数据提交

本文详解 React 前端通过 fetch 向本地 PHP 后端（如 requests.php）发送 POST 请求时常见的三大问题：表单默认提交导致页面跳转、请求体未序列化、CORS 配置缺失，并提供完整可运行的修复方案。

本文详解 react 前端通过 `fetch` 向本地 php 后端（如 `requests.php`）发送 post 请求时常见的三大问题：表单默认提交导致页面跳转、请求体未序列化、cors 配置缺失，并提供完整可运行的修复方案。

在 React 项目中集成 PHP 后端进行数据交互是初学者常见的实践路径，但极易因前后端协作细节疏漏而失败。你遇到的 NetworkError 和地址栏意外刷新（如 ?company=xxx&person=xxx），并非网络不通，而是典型的表单默认行为 + 请求配置错误 + CORS 拦截三重叠加问题。下面将逐层拆解并给出生产级解决方案。

✅ 一、阻止表单默认提交（关键第一步）

React 中

标签会触发浏览器原生提交行为（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);
  }
};

⚠️ 注意：在
内默认为 type="submit"，务必加 event.preventDefault()；也可直接移除标签，改用 div 包裹输入控件，彻底规避表单语义干扰。

✅ 二、PHP 端正确处理 CORS 与请求体

前端 fetch 的 Content-Type: application/json 要求 PHP 必须能解析 JSON 请求体（$_POST 仅支持 application/x-www-form-urlencoded 或 multipart/form-data）。因此需手动读取原始输入流，并严格按顺序设置响应头：

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

<?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()` + 移除或禁用
请求体错误	`NetworkError` / 400	`JSON.stringify()` + `Content-Type: application/json`
CORS 拦截	浏览器控制台报 CORS 错误	PHP 顶部设 `Access-Control-*` 头 + 处理 `OPTIONS`