调用PHP控制器DELETE接口时React的json()解析失败问题排查

错误信息 #

VM345:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input

问题场景 #

使用React调用PHP编写的DELETE接口时，在response.json()环节报错。其他GET、POST接口正常，仅DELETE请求会触发OPTIONS预请求。

PHP接口代码 #

header("Content-Type: application/json; charset=UTF-8");    
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header("Access-Control-Allow-Headers: *");


if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    error_log('green options');
    return;
}

if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {

    http_response_code(204);   // HTTP DELETE对应的状态码
    // http_response_code(404);
    $jsonData = json_encode([
        "message" => "Product not found"
    ]);
    error_log($jsonData);
    print $jsonData;

}

React请求代码 #

const requestOptions = {
    method: 'DELETE',
    mode: 'cors',
};
fetch(URL + id, requestOptions).then(response => {
    return response.json(); // 此处抛出错误
}).then(data => {
    console.log(data);
});

调试截图说明 #

• 网络请求中DELETE接口返回状态码204，无响应体内容
• 响应详情面板未显示任何JSON数据

核心原因 #

HTTP 204状态码的定义是无内容（No Content），服务器成功处理请求后，不应该返回任何响应体。你的PHP代码虽然输出了JSON，但浏览器会自动忽略204响应的内容，导致response.json()尝试解析空字符串，最终触发JSON解析错误。

OPTIONS预请求的处理没有问题，它只是浏览器的跨域预检机制，不会影响DELETE请求的执行结果。

解决方法 #

方案一：换用带响应体的状态码 #

如果需要返回错误提示（比如"Product not found"），不要使用204，改用符合业务逻辑的状态码（比如404）：

if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
    // 替换为404状态码
    http_response_code(404);   
    $jsonData = json_encode([
        "message" => "Product not found"
    ]);
    error_log($jsonData);
    print $jsonData;
}

方案二：保留204，移除响应体并修改React逻辑 #

如果不需要返回内容，直接返回204，同时React端跳过JSON解析：

PHP代码修改

if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
    http_response_code(204);
    // 移除print语句，确保无响应体输出
    exit;
}

React代码修改

const requestOptions = {
    method: 'DELETE',
    mode: 'cors',
};
fetch(URL + id, requestOptions).then(response => {
    // 204状态码直接返回自定义内容，不解析JSON
    if (response.status === 204) {
        return { status: 'success', message: '删除完成' };
    }
    // 其他状态码正常解析JSON
    return response.json();
}).then(data => {
    console.log(data);
});

Chrome调试技巧 #

1. 打开Chrome开发者工具→网络面板，找到对应的DELETE请求
2. 点击请求进入详情页，切换到响应标签，查看是否有实际返回的内容
3. 切换到预览标签，可直接查看已解析的JSON结果（如果有）
4. 在React代码的response.json()前添加console.log(response)，可以查看响应的状态码、请求头、是否有响应体等关键信息

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