如何在 React 中使用 Axios 正确调用 PHP 后端接口

本文详解 react + axios 与 php 后端通信的关键配置：解决“cannot post”错误、正确读取请求数据、启用 cors 支持，并说明 restful 路由设计的注意事项。

在 React 应用中通过 Axios 向 PHP 文件发起 POST 请求时，出现 Cannot POST /src/api/addPeople.php 错误，根本原因并非代码语法问题，而是运行环境不匹配：React 的开发服务器（如 Webpack Dev Server 或 Vite）仅能托管静态资源（HTML/JS/CSS），无法解析或执行 PHP 脚本。PHP 必须由支持 PHP 的 Web 服务器（如 Apache、Nginx 或 PHP 内置服务器）来运行。

✅ 正确的运行环境配置

推荐使用 PHP 内置 Web 服务器进行本地开发（无需安装 Apache/Nginx）：

# 在包含 addPeople.php 的目录（例如 ./src/api/）中执行：
php -S localhost:8000 -t .

⚠️ 注意：-t . 表示当前目录为文档根目录；确保 addPeople.php 可被该服务

器直接访问（如通过 http://localhost:8000/addPeople.php）。

然后在 React 中将 Axios 请求 URL 改为绝对路径（指向 PHP 服务地址）：

function handleAddPeople(event) {
  event.preventDefault(); // 防止表单默认提交
  const name = nameRef.current.value;
  const surname = surnameRef.current.value;
  const age = ageRef.current.value;

  axios({
    method: 'post',
    url: 'http://localhost:8000/addPeople.php', // ✅ 绝对 URL，指向 PHP 服务
    data: { name, surname, age },
    headers: {
      'Content-Type': 'application/json' // 明确声明发送 JSON
    }
  })
  .then(response => console.log('Success:', response.data))
  .catch(error => console.error('Error:', error.response?.status, error.message));
}

✅ PHP 端：安全接收并处理 JSON 数据

你的原始 PHP 代码存在多个关键问题：SQL 注入风险、变量名不一致（$surname 未定义）、缺少 CORS 头、未处理预检请求（OPTIONS）。以下是修复后的 addPeople.php 示例：

 'DB connection failed: ' . mysqli_connect_error()]));
}

// ✅ 安全读取 JSON 请求体
$input = file_get_contents('php://input');
$data = json_decode($input, true);

if (json_last_error() !== JSON_ERROR_NONE || !is_array($data)) {
  http_response_code(400);
  die(json_encode(['error' => 'Invalid JSON payload']));
}

// ✅ 使用预处理语句防止 SQL 注入
$stmt = $con->prepare("INSERT INTO tabella1 (name, surname, age) VALUES (?, ?, ?)");
$stmt->bind_param("sii", $data['name'], $data['surname'], $data['age']);

if ($stmt->execute()) {
  echo json_encode(['success' => true, 'message' => 'Record inserted']);
} else {
  http_response_code(500);
  echo json_encode(['error' => 'Query failed: ' . $stmt->error]);
}

$stmt->close();
$con->close();

❌ 关于 “path/to/phpFile/functionName” 路由的说明

你提到希望实现类似 api.php/addPeople 的路由风格——这不是 PHP 原生支持的机制。PHP 文件本身不提供路由功能。若需此类 RESTful 设计，有以下两种专业方案：

• 方案一（轻量级）：使用单一入口文件（如 api.php），通过 $_SERVER['PATH_INFO'] 解析路径并分发到对应方法：

  // api.php
  $path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
  $segments = explode('/', trim($path, '/'));
  if (count($segments) >= 2 && $segments[0] === 'api') {
      $action = $segments[1];
      switch($action) {
          case 'addPeople': handleAddPeople(); break;
          default: http_response_code(404); echo 'Not found'; break;
      }
  }

  Axios 请求改为：url: 'http://localhost:8000/api.php/addPeople'

• 方案二（推荐）：采用成熟框架（如 Slim、Laravel Lumen），它们内置路由、中间件和 ORM，大幅提升可维护性与安全性。

✅ 总结：关键检查清单

遵循以上规范，即可稳定实现 React ↔ PHP 的数据交互，并为后续扩展 REST API 奠定坚实基础。

# css  # word  # js  # json  # html  # 字符串  # 接口  # php  # mysql  # sql  # apache  # nginx  # 中间件  # laravel  # react  # vite  # webpack  # restful 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】