React使用fetch请求WordPress PHP接口出现JSON解析错误如何解决？

问题产生原因 #

JSON解析错误的核心原因是PHP接口返回了两段拼接的JSON字符串，不符合标准JSON格式要求：
从你贴的Postman返回结果能看到，接口先输出了查询成功的{"data": [...], "status": "success"}，后面又拼接了一段{"status": "fail", "error": "Request Not Verified."}，两个JSON对象直接连在一起，res.json()解析的时候读到第一个对象结束后的第二个{就会抛出位置176的语法错误。

出现这种双重输出的常见诱因：

• PHP接口文件存在重复的执行逻辑，比如相同的参数校验、输出逻辑被写了两次，第一次执行验证通过输出成功结果，第二次执行时变量未重置导致验证失败输出失败结果
• 接口文件被意外引入/执行了两次，比如WordPress的钩子重复挂载了该接口逻辑，或者文件顶部/底部引入了其他也会输出JSON的代码
• 你判断参数非空的if( !empty($_GET))逻辑执行完后，后面还有其他输出JSON的代码未加判断，继续执行输出了第二段结果

解决方案 #

第一步：快速定位重复输出源头 #

在PHP文件的echo json_encode($data);之后直接加exit;终止后续代码执行，修改后请求接口如果只返回一段正常JSON，就说明是后续代码导致的重复输出：

echo json_encode($data);
exit; // 新增这行，终止脚本继续执行

第二步：修复代码逻辑漏洞 #

1. 增加必填参数校验，避免未传参数时的逻辑异常：

if (!isset($_GET['sId'], $_GET['locationId'])) {
    echo json_encode([
        'status' => 'fail',
        'error' => 'Missing required parameters'
    ]);
    exit;
}

2. 修复SQL注入风险，你当前的SQL语句直接拼接用户传入的$locationId，存在严重注入漏洞，改用预处理语句：

$stmt = mysqli_prepare($conn, "SELECT * from customer where location_id = ? AND result IS NULL ORDER BY id DESC");
mysqli_stmt_bind_param($stmt, "s", $locationId);
mysqli_stmt_execute($stmt);
$exec = mysqli_stmt_get_result($stmt);

3. 检查WordPress挂载接口的逻辑，确认接口回调函数只会执行一次，没有重复绑定动作。

第三步：前端代码健壮性优化 #

把注释掉的catch打开，避免未捕获的Promise异常抛到全局，排查问题时可以先打印原始响应文本确认格式：

fetch(url, option)
  .then(async (res) => {
    if (res.ok) {
      // 排查问题时可以先打印原始文本确认返回内容
      // const rawText = await res.text();
      // console.log(rawText);
      return res.json();
    } else {
      throw new Error(`Request failed with status ${res.status}`);
    }
  })
  .then((resJson) => {
    return resJson.data;
  })
  .catch((err) => console.log(err)); // 打开catch捕获异常

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