React请求PHP接口返回非JSON格式问题排查

问题概述 #

开发React应用时，通过Apache服务器上的index.php接口获取JSON数据渲染ag-grid表格，单独访问PHP接口能正常返回JSON，但React端报错“La risposta non è di tipo JSON”（响应非JSON格式）。

核心问题排查与修复步骤 #

1. 修正接口路径不匹配 #

React代码中请求的是index2.php，但提供的后端代码是index.php，先确保请求路径和实际文件名一致：

// 把fetch的路径改成实际的PHP文件名
const response = await fetch('index.php');

2. 修复PHP输出的头部与编码问题 #

PHP中header('Content-Type: application/json')必须放在任何输出之前，包括错误提示的die语句，否则头部无法生效；同时要避免文件开头的多余字符/BOM：

修改后的index.php：

<?php
// 确保<?php前无任何空格、换行或BOM头
$servername = "127.0.0.1";
$username = "gaetano";
$password = "gaetano";
$dbname = "ompm";

// 先设置JSON头部，避免后续输出干扰
header('Content-Type: application/json; charset=utf-8');

// 创建数据库连接
$conn = mysqli_connect($servername, $username, $password, $dbname);

// 检查连接状态
if (!$conn) {
    // 用JSON格式返回错误，而非直接输出文本
    echo json_encode(["error" => "数据库连接失败: " . mysqli_connect_error()]);
    exit;
}

// 执行查询
$query = "SELECT * FROM datidaimportare";
$result = mysqli_query($conn, $query);

// 检查查询错误
if (!$result) {
    echo json_encode(["error" => "查询错误: " . mysqli_error($conn)]);
    exit;
}

// 整理查询结果
$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// 关闭数据库连接
mysqli_close($conn);

// 处理特殊字符，确保JSON编码正确
echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>

3. 增强React端的调试与兼容性 #

在React的catch块中添加响应文本打印，方便排查实际返回内容；同时跳过严格的Content-Type检查（部分服务器可能返回text/json）：

修改后的App.js中fetch逻辑：

const fetchData = async () => {
  try {
    const response = await fetch('index.php');

    if (!response.ok) {
      throw new Error(`请求错误: ${response.status}`);
    }

    // 打印原始响应内容，便于排查问题
    const responseText = await response.text();
    console.log('原始响应内容:', responseText);
    
    try {
      const rowData = JSON.parse(responseText);
      if (isMounted) {
        console.log('从index.php获取的数据:', rowData);
        setRowData(rowData);
      }
    } catch (parseError) {
      throw new Error('JSON解析失败: ' + parseError.message);
    }
  } catch (error) {
    console.error('请求index.php时出错:', error);
  }
};

4. 检查跨域问题 #

如果React开发服务器（通常是localhost:3000）和Apache服务器（比如localhost:80）不在同一端口，会存在跨域问题。需要在index.php开头添加CORS头部：

header("Access-Control-Allow-Origin: *"); // 生产环境建议指定具体域名
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

额外注意点 #

• 确保PHP文件的编码是UTF-8无BOM，避免输出隐藏字符
• 若JSON编码失败，可通过json_last_error()排查具体编码问题

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