如何在 React Hook 中正确通过 AJAX 调用本地 PHP 后端服务

本文详解 react 函数组件中使用 ajax（jquery 或原生 fetch）向 php 服务器提交表单时的常见错误——尤其是相对路径导致请求被前端开发服务器拦截的问题，并提供完整可运行的修复方案。

本文详解 react 函数组件中使用 ajax（jquery 或原生 fetch）向 php 服务器提交表单时的常见错误——尤其是相对路径导致请求被前端开发服务器拦截的问题，并提供完整可运行的修复方案。

在 React 中通过表单提交调用 PHP 后端，核心难点往往不在 React 逻辑本身，而在于请求目标地址的解析机制。你提供的代码逻辑基本正确：useState 管理表单状态、e.preventDefault() 阻止默认提交、$.ajax 发起异步请求——但问题出在这一行：

action="server.php"

该相对路径会被浏览器解析为当前页面所在域下的路径。当 React 应用运行在 http://localhost:3000（如 create-react-app 默认开发服务器），而 PHP 服务运行在 http://localhost:8000（例如 php -S localhost:8000），此时

实际发起的请求是：

POST http://localhost:3000/server.php ← ❌ 前端服务器无此路由，返回 404 或 CORS 错误

而非你期望的：

POST http://localhost:8000/server.php ← ✅ PHP 服务真实地址

✅ 正确做法：使用绝对 URL 指向 PHP 服务

将表单 action 改为完整协议+主机+端口的绝对地址：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

同时，确保 PHP 文件 server.php 正确启用 CORS（你已做到）并处理 POST 数据：

<?php header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_POST['name'] ?? '';
    echo "Hello from server: " . htmlspecialchars($name);
} else {
    http_response_code(405);
    echo "Method not allowed";
}
?>

⚠️ 注意事项：
开发阶段务必确认 PHP 服务已启动（如 php -S localhost:8000），且端口未被占用；
若使用 fetch 替代 jQuery（更推荐），需手动序列化表单数据或使用 FormData：
const handleSumbit = async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
try {
  const res = await fetch('http://localhost:8000/server.php', {
    method: 'POST',
    body: formData
  });
  const data = await res.text();
  setResult(data);
} catch (err) {
  console.error('Request failed:', err);
  setResult('Error: Network or server issue');
}
};
生产环境中禁止硬编码 host/port，应通过环境变量（如 process.env.REACT_APP_API_BASE_URL）统一管理后端地址；

jQuery 依赖需确保已引入（非现代 React 推荐方式），建议优先采用原生 fetch 或 Axios。

修复后，点击提交按钮将成功触发 POST 请求至 PHP 服务，响应内容会实时显示在