React+Node.js应用删除数据时报错：无法解析有效JSON

问题说明 #

在React里调用删除接口后，数据库里的数据没删掉，还弹出报错：

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

前端调用代码如下：

if (agree) {
    fetch(`http://localhost:5000/users/${user._id}`, {
        method: 'DELETE'
    })
        .then(res => res.json())
        .then(data =>
            //     if (data.deleteCound > 0) {
            //     alert('User Deleted Successfully')
            // }
            console.log(data)
        );
}

问题原因 #

这个错误的核心是：后端返回的不是合法的JSON数据，而是HTML内容（比如404错误页面、服务器报错的HTML页面）。大概率是下面两个原因：

• 前端请求的接口地址不对，后端根本没配置对应的DELETE路由，导致返回了默认的HTML错误页
• 后端的DELETE接口实现有问题，执行删除操作失败后，没有返回JSON格式的响应，而是抛出了HTML页面

解决步骤 #

1. 先确认接口地址和后端路由是否匹配 #

直接用Postman或者浏览器的开发者工具，手动发送DELETE http://localhost:5000/users/[具体用户ID]请求，看看返回的内容。如果返回的是HTML，说明后端的/users/:id这个DELETE路由没配置对，或者端口不是5000，先把路由问题解决。

2. 检查后端DELETE接口的实现 #

确保后端处理DELETE请求时，无论成功失败都返回JSON格式：
比如Node.js/Express的示例代码：

app.delete('/users/:id', async (req, res) => {
    try {
        const deletedUser = await User.findByIdAndDelete(req.params.id);
        if (!deletedUser) {
            return res.status(404).json({ message: '用户不存在', deleteCount: 0 });
        }
        res.json({ message: '删除成功', deleteCount: 1 });
    } catch (error) {
        res.status(500).json({ message: '删除失败', error: error.message, deleteCount: 0 });
    }
});

绝对不能让后端返回HTML页面，必须始终返回JSON。

3. 给前端请求加错误处理 #

在fetch链里加上catch，捕获错误并查看后端返回的原始内容，方便调试：

if (agree) {
    fetch(`http://localhost:5000/users/${user._id}`, {
        method: 'DELETE'
    })
        .then(res => {
            // 先判断响应状态是否正常
            if (!res.ok) {
                throw new Error(`请求失败，状态码：${res.status}`);
            }
            return res.json();
        })
        .then(data => {
            if (data.deleteCount > 0) {
                alert('用户删除成功');
                // 这里可以加上更新前端列表的逻辑，比如把已删除的用户从列表里去掉
            } else {
                alert('用户不存在或删除失败');
            }
            console.log(data);
        })
        .catch(err => {
            console.error('请求出错：', err);
            // 查看后端返回的原始HTML内容，定位问题
            fetch(`http://localhost:5000/users/${user._id}`, { method: 'DELETE' })
                .then(res => res.text())
                .then(rawContent => console.log('后端返回内容：', rawContent));
        });
}

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