前端Fetch与后端PHP：正确处理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;

<?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);

?>