PHP中处理fetch API请求：JSON负载与URL编码数据的实践指南

const data = { par1: 'value1', par2: 'value2' };

fetch('/myscript.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json' // 明确声明发送的是 JSON
    },
    mode: 'same-origin', // 确保同源策略
    credentials: 'same-origin', // 发送 Cookies 等凭证
    body: JSON.stringify(data) // 将数据序列化为 JSON 字符串
})
.then(response => response.text())
.then(output => {
    console.log(output); // 处理服务器响应
})
.catch(error => {
    console.error('Fetch error:', error);
});

<?php
// 获取原始请求体内容
$inputJson = file_get_contents('php://input');

// 将 JSON 字符串解码为 PHP 关联数组
$inputData = json_decode($inputJson, true);

// 检查解码是否成功，并处理数据
if ($inputData === null && json_last_error() !== JSON_ERROR_NONE) {
    // JSON 解析错误处理
    header('Content-Type: application/json', true, 400);
    echo json_encode(['error' => 'Invalid JSON data']);
    exit;
}

// 访问数据
$param1 = $inputData['par1'] ?? null;
$param2 = $inputData['par2'] ?? null;

// 进行业务逻辑处理...
$output = "Received: par1 = {$param1}, par2 = {$param2}";

// 返回响应
header('Content-Type: text/plain'); // 根据实际响应类型设置
echo $output;
?>

const data = { par1: 'value1', par2: 'value2' };

fetch('/myscript.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest' // 手动添加此头部
    },
    mode: 'same-origin',
    credentials: 'same-origin',
    body: JSON.stringify(data)
})
.then(response => response.text())
.then(output => {
    console.log(output);
})
.catch(error => {
    console.error('Fetch error:', error);
});

<?php
// 检查 X-Requested-With 头部
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') {
    // 警告：此方法并非绝对安全，仅作为初步判断
    header('Content-Type: text/plain', true, 403);
    die('Invalid request origin!');
}

// ... 后续处理 JSON 数据 ...
$inputJson = file_get_contents('php://input');
$inputData = json_decode($inputJson, true);
// ...
?>

const par1 = 'value1 with spaces';
const par2 = 'value2&symbols';

// 构建 URL 编码字符串
const body = `par1=${encodeURIComponent(par1)}&par2=${encodeURIComponent(par2)}`;

fetch('/myscript.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded', // 明确声明发送的是 URL 编码数据
        'X-Requested-With': 'XMLHttpRequest' // 如果需要，可以继续添加
    },
    mode: 'same-origin',
    credentials: 'same-origin',
    body: body // 发送 URL 编码字符串
})
.then(response => response.text())
.then(output => {
    console.log(output);
})
.catch(error => {
    console.error('Fetch error:', error);
});

<?php
// 此时，数据会自动填充到 $_POST 数组中
$param1 = $_POST['par1'] ?? null;
$param2 = $_POST['par2'] ?? null;

// 检查是否收到数据
if (empty($_POST)) {
    header('Content-Type: application/json', true, 400);
    echo json_encode(['error' => 'No POST data received']);
    exit;
}

// 进行业务逻辑处理...
$output = "Received via _POST: par1 = {$param1}, par2 = {$param2}";

// 返回响应
header('Content-Type: text/plain');
echo $output;
?>