如何实现JavaScript Fetch传JSON到PHP并接收返回数据？

1. PHP端正确获取带类型的请求参数 #

前端通过Content-Type: application/json发送的JSON数据不会自动存入$_POST，需手动读取请求体并解析，json_decode会保留原始数据类型：

<?php
// 读取原始请求内容
$rawInput = file_get_contents('php://input');
// 解析为关联数组，保留原始类型（数值、字符串等）
$requestData = json_decode($rawInput, true);

// 验证参数是否存在，避免报错
if (!isset($requestData['myFloat'], $requestData['myString'])) {
    header('HTTP/1.1 400 Bad Request');
    echo json_encode(['error' => '缺少必要参数']);
    exit;
}

// 直接提取，类型与前端一致：$myFloat为浮点数，$myString为字符串
$myFloat = $requestData['myFloat'];
$myString = $requestData['myString'];
?>

2. PHP打包处理结果并返回 #

设置响应头为JSON格式，用json_encode将数据转为JSON字符串输出，同样会保留类型：

// 处理业务逻辑
$returnFloat = 2.0 * $myFloat;
$returnString = $myString . " and Goodbye";

// 设置响应头，告知前端返回格式
header('Content-Type: application/json');
// 输出JSON格式的响应内容
echo json_encode([
    'returnFloat' => $returnFloat,
    'returnString' => $returnString
]);
exit; // 终止脚本，避免输出多余内容

3. JS端接收并解析返回数据 #

response.json()会自动将后端返回的JSON字符串解析为JS对象，且保留原始类型，直接提取对应字段即可：

return fetch('http://www.mywebsite.com/backend.php', {
    method: "post",
    headers: {
        'content-type': 'application/json'
    },
    body: JSON.stringify({
        myFloat: 3.14,
        myString: "Hello"
    })
})
.then((response) => {
    // 先校验响应状态是否正常
    if (!response.ok) {
        throw new Error('请求失败');
    }
    return response.json();
})
.then((data) => {
    // 提取数据，类型自动匹配：returnFloat是浮点数，returnString是字符串
    let returnFloat = data.returnFloat;
    let returnString = data.returnString;
    
    // 可选：验证类型
    console.log(typeof returnFloat); // 输出 "number"
    console.log(typeof returnString); // 输出 "string"
});

4. 跨站安全问题与配置 #

核心问题：跨域资源共享（CORS） #

如果前端页面和后端PHP不在同一域名/端口/协议下，会触发跨域限制，需配置CORS允许前端访问。

方案1：PHP代码中设置CORS头（灵活，适合单接口配置）

在输出任何内容之前添加以下代码：

// 允许指定前端域名访问（生产环境请勿用*）
header('Access-Control-Allow-Origin: http://your-frontend-domain.com');
// 允许的请求方法
header('Access-Control-Allow-Methods: POST');
// 允许的请求头
header('Access-Control-Allow-Headers: Content-Type');

方案2：Apache服务器（.htaccess配置）

在项目根目录的.htaccess文件中添加：

Header set Access-Control-Allow-Origin "http://your-frontend-domain.com"
Header set Access-Control-Allow-Methods "POST"
Header set Access-Control-Allow-Headers "Content-Type"

注意：需确保Apache启用了mod_headers模块。

方案3：Windows IIS服务器

1. 打开IIS管理器，选中目标站点
2. 点击“HTTP响应头”功能
3. 添加三个响应头：
   • 名称：Access-Control-Allow-Origin，值：http://your-frontend-domain.com
   • 名称：Access-Control-Allow-Methods，值：POST
   • 名称：Access-Control-Allow-Headers，值：Content-Type

额外安全建议 #

• 生产环境避免用*作为Access-Control-Allow-Origin，必须指定具体允许的域名
• 对前端传入的参数做合法性校验，比如验证$myFloat是有效数值，$myString长度合理等
• 避免返回敏感信息，响应内容只包含必要数据

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