如何确认Next.js前端发送的数据被PHP后端接收并返回响应？

你的代码存在两个核心问题导致PHP无法正确接收数据，同时我会告诉你如何确认数据接收与响应：

一、核心问题说明 #

1. CORS头拼写错误：Access-Control-Allow-0rigin里的0是数字，应为字母O（正确写法是Access-Control-Allow-Origin）
2. 数据格式不匹配：前端发送的是JSON字符串，但PHP的$_POST仅能解析form-data或x-www-form-urlencoded格式的请求体，无法直接读取JSON数据

二、修复PHP后端代码 #

修改register.php，改为读取JSON请求体并返回结构化响应：

<?php
// 修复CORS头拼写，允许跨域请求
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
// 指定返回内容为JSON格式，方便前端解析
header("Content-Type: application/json");

$servername = "localhost";
$database = "*********";
$username = "************";
$password = "************";
$conn = new mysqli($servername, $username, $password, $database);

// 读取JSON格式的请求体内容
$rawInput = file_get_contents('php://input');
// 转为关联数组，方便读取字段
$requestData = json_decode($rawInput, true);

// 验证并返回响应
if (isset($requestData['firstname'])) {
    echo json_encode([
        'status' => 'success',
        'msg' => '数据已接收',
        'received_data' => [
            'firstname' => $requestData['firstname']
        ]
    ]);
} else {
    echo json_encode([
        'status' => 'error',
        'msg' => '未接收到firstname字段'
    ]);
}
?>

三、优化前端请求代码（可选但更规范） #

添加Content-Type头，明确告诉后端请求体是JSON格式：

const onSubmit = async (data: ShopFormValues) => {
    setLoading(true)
    try {        
        const response = await fetch("https://***********.com/register.php", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json', // 新增该头，明确数据格式
            },
            body: JSON.stringify({ firstname: "example" }),
        });
        
        // 解析后端返回的JSON响应
        const responseData = await response.json();
        console.log('后端响应结果:', responseData);
        
        // 根据响应状态做后续处理
        if (responseData.status === 'success') {
            console.log('成功发送，后端收到的名字:', responseData.received_data.firstname);
        } else {
            console.log('发送失败:', responseData.msg);
        }
    } catch (error: any) {
        console.log('Network error!', error);
    } finally {
        setLoading(false)
    }
};

四、确认数据接收与响应的方法 #

1. 前端控制台验证：修改后，打开浏览器控制台，会直接打印后端返回的JSON对象，能直观看到是否接收成功、收到的具体数据
2. 后端日志调试：如果想在服务器端确认，可以在PHP中添加日志记录（需确保服务器有文件写入权限）：

   // 在读取$requestData后添加
   file_put_contents('request_log.txt', print_r($requestData, true) . PHP_EOL, FILE_APPEND);
   

   服务器会生成request_log.txt文件，里面会记录每次接收到的请求数据
3. 浏览器开发者工具排查：打开浏览器「开发者工具」→「网络」标签，找到register.php请求：
   • 查看「请求头」确认Content-Type为application/json
   • 查看「请求体」确认发送的firstname值正确
   • 查看「响应体」确认后端返回的内容符合预期

内容的提问来源于stack exchange，提问作者Being47