本教程详细阐述如何使用react的Fetch API向php后端发送URL编码的表单数据，并确保PHP正确接收。文章将纠正常见的Fetch配置错误，指导前端使用`URLSearchParams`构建请求体，并展示PHP如何通过`$_POST`超全局变量获取数据，从而解决数据传输为空的问题，实现前后端高效可靠的数据通信。
理解http数据传输机制
在Web开发中，前后端之间的数据交互是核心。当从客户端（如React应用）向服务器（如PHP）发送表单数据时，选择正确的数据编码格式和相应的处理方式至关重要。常见的表单数据编码方式有两种：
- application/x-www-form-urlencoded: 这是html表单默认的编码方式。数据以键值对的形式进行URL编码，并用&符号连接。例如：username=test&password=123。
- multipart/form-data: 当表单包含文件上传时使用。它将表单数据分割成多个部分，每个部分有自己的Content-Disposition和Content-Type。
此外，还有application/json，它通常用于发送结构化的jsON数据，需要将javaScript对象通过json.stringify()转换为字符串，并在PHP端使用json_decode(file_get_contents(‘php://input’))来解析。
本教程将重点解决在使用Fetch API发送application/x-www-form-urlencoded类型数据时，PHP无法正确接收的问题。
立即学习“PHP免费学习笔记（深入）”；
前端（React/javascript）实现：使用Fetch发送URL编码数据
在使用Fetch API发送表单数据时，确保Content-Type头部与请求体body的数据格式严格匹配是关键。一个常见的错误是将body参数错误地放置在headers对象内部。
1. 构建URL编码的请求体
对于application/x-www-form-urlencoded类型的数据，我们应该使用URLSearchParams对象来构建请求体。它提供了一种方便的方式来创建URL查询字符串格式的数据。
import React from 'react'; class Test extends React.Component { constructor(props) { super(props); this.state = { username: "", password: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(Event) { const { name, value, type } = event.target; if (type === "text") { this.setState({ username: value }); } else if (type === "password") { this.setState({ password: value }); } } handleSubmit(event) { event.preventDefault(); // 阻止表单默认提交行为 // 使用URLSearchParams构建URL编码的表单数据 const formData = new URLSearchParams(); formData.append("username", this.state.username); formData.append("password", this.state.password); fetch("http://192.168.1.54/test/index.php", { method: 'POST', headers: { // 明确指定Content-Type为URL编码 "Content-Type": "application/x-www-form-urlencoded", // 跨域请求所需的头部，根据实际情况配置 "access-Control-Allow-Origin": "*" }, // 请求体应为URLSearchParams对象的字符串形式 body: formData.toString() }) .then((response) => { // 检查HTTP响应状态码 if (response.ok) { return response.json(); // 解析JSON响应 } else { // 如果响应不成功，抛出错误 throw new Error(`HTTP error! Status: ${response.status}`); } }) .then((data) => { console.log("服务器响应:", data); // 在此处处理服务器返回的数据 }) .catch((error) => { console.error("Fetch请求出错:", error); // 在此处处理网络错误或其他异常 }); } render() { return( <form onSubmit={this.handleSubmit}> {/* 将handleSubmit绑定到form的onSubmit事件 */} <input type="text" name="username" value={this.state.username} onChange={this.handleChange} /> <input type="password" name="password" value={this.state.password} onChange={this.handleChange} /> <input type="submit" value="提交" /> </form> ); } } export default Test;
2. 注意事项
- body参数的位置: 确保body参数直接作为fetch选项对象的属性，而不是嵌套在headers对象内部。这是原始问题中一个常见的错误。
- Content-Type: 必须设置为”application/x-www-form-urlencoded”。
- URLSearchParams.toString(): URLSearchParams对象本身不能直接作为body，需要调用其toString()方法将其转换为URL编码的字符串。
- 错误处理: 总是添加.then()链中的错误检查和.catch()来捕获网络错误或HTTP响应错误，以增强应用的健壮性。
- onSubmit vs onClick: 将handleSubmit绑定到<form>元素的onSubmit事件是更标准的做法，这样用户按下回车键也能触发提交，并且可以更可靠地使用event.preventDefault()。
后端（PHP）数据接收与处理
当前端以application/x-www-form-urlencoded格式发送数据时，PHP会将其自动解析并填充到$_POST超全局变量中。因此，后端获取数据的方式非常直接。
<?php // 设置CORS头部，允许所有来源访问（生产环境应限制特定来源） header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Headers: *'); // 允许所有自定义头部 // 创建一个标准对象用于存储数据 $user = new stdClass(); // 从$_POST超全局变量中获取数据 // 注意：如果前端发送的是application/x-www-form-urlencoded，数据会在这里 if (isset($_POST['username'])) { $user->username = $_POST['username']; } else { // 处理username未提交的情况，例如设置为null或返回错误信息 $user->username = null; } // 示例：可以添加更多字段 // if (isset($_POST['password'])) { // $user->password = $_POST['password']; // } // 将结果编码为JSON并输出 header('Content-Type: application/json'); // 告知客户端响应是JSON格式 echo json_encode($user); ?>
1. $_POST与file_get_contents(‘php://input’)的区别
- $_POST: 用于接收application/x-www-form-urlencoded和multipart/form-data类型的数据。PHP会自动解析这些数据并填充到$_POST数组中。
- file_get_contents(‘php://input’): 用于读取原始的HTTP请求体。当请求的Content-Type是application/json、text/plain或任何其他PHP无法自动解析到$_POST中的数据类型时，需要使用此方法。原始问题中PHP代码使用此方法来解析JSON，但前端发送的是URL编码数据，导致数据无法正确解析。
2. CORS配置
在PHP脚本中，header(‘Access-Control-Allow-Origin: *’);和header(‘Access-Control-Allow-Headers: *’);是处理跨域资源共享（CORS）的关键。这些头部允许来自不同域的JavaScript代码访问当前PHP服务。在生产环境中，出于安全考虑，Access-Control-Allow-Origin应尽可能地指定具体的允许域名，而不是使用*。
总结与最佳实践
正确地进行前后端数据交互，需要深入理解HTTP协议和各种数据编码格式。
- 匹配Content-Type: 前端发送请求时设置的Content-Type头部必须与body中实际的数据格式相匹配。
- 选择合适的工具:
- 发送URL编码表单数据时，前端使用URLSearchParams，PHP使用$_POST。
- 发送JSON数据时，前端使用JSON.stringify()，Content-Type设置为application/json，PHP使用json_decode(file_get_contents(‘php://input’))。
- 发送包含文件的表单数据时，前端使用FormData，Content-Type通常无需手动设置（浏览器会自动设置multipart/form-data），PHP同样使用$_POST和$_FILES。
- Fetch API body参数: body参数是fetch选项对象的一个顶级属性，不应放在headers对象内部。
- 健壮的错误处理: 在前端和后端都应实现完善的错误处理机制，包括网络错误、HTTP响应状态码检查以及数据解析错误。
- 安全性: 在生产环境中，严格配置CORS策略，并对所有用户输入进行验证和过滤，以防止安全漏洞。
通过遵循这些指南，可以确保React Fetch与PHP后端之间的数据通信顺畅无阻，避免因数据格式不匹配导致的问题。