调用REST API发送DELETE请求一直返回400 Bad Request错误如何解决

核心错误点 #

• 前端请求体格式不符合Content-Type: application/json要求：指定了请求内容为JSON格式，但body直接传入了uid原始字符串，没有序列化为JSON字符串，服务端无法正常解析请求体所以返回400错误
• 服务端参数获取错误：直接把整个request对象作为_id的查询值，没有正确解析请求体里的uid参数，且处理逻辑没有返回响应，会导致请求超时或异常
• 额外注意：部分服务端框架默认不会解析DELETE请求的请求体，需要单独配置中间件支持

修复代码 #

前端代码修改 #

将请求体序列化为符合要求的JSON格式：

document.body.addEventListener('click', function(event) {
    if (event.target.id == uid) {
        const options = {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ id: uid })
        };
        fetch('/api', options)
        // 可选添加错误捕获方便调试
        .catch(err => console.error('请求出错：', err));
    };
});

服务端代码修改（以Express框架为例） #

首先确保已开启JSON解析中间件，再修正参数获取逻辑并添加响应返回：

// 该中间件需要放在所有路由定义之前，用于解析JSON格式的请求体
app.use(express.json());

app.delete('/api', (request, response) => {
    // 从请求体中获取传入的目标id
    const targetId = request.body.id;
    database.remove({ _id: targetId }, {}, function(err, numRemoved) {
        if (err) {
            return response.status(500).json({ msg: '删除失败', error: err });
        }
        return response.status(200).json({ msg: '删除成功', count: numRemoved });
    });
});

可选优化方案 #

如果不想在DELETE请求中携带请求体，也可以将id放在URL参数中，更符合REST API设计规范：

• 前端请求地址改为fetch(/api/${uid}, options)
• 服务端路由改为app.delete('/api/:id', (req, res) => { const targetId = req.params.id })

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