Angular向NestJS发送DELETE、PATCH请求返回404错误如何解决

安全阿岳

2026-10-20

问题根因

404错误的核心原因是前端请求方法与后端路由定义的请求方法不匹配：

后端dishes.controller.ts中更新接口用@Patch装饰器定义为PATCH请求、删除接口用@Delete装饰器定义为DELETE请求
前端dishes.service.ts中调用这两个接口时错误使用了POST方法，请求方法不匹配导致NestJS无法识别对应路由，返回404。

修复方案

修改Angular端dishes.service.ts的对应方法，改用匹配的请求方法：

// 更新方法改用PATCH请求
updateDish(dish: Dish) {
  return this.http.patch(`http://localhost:3000/dishes/update/${dish.id}`, dish);
} 
// 删除方法改用DELETE请求
deleteDish(dish: Dish) {
  return this.http.delete(`http://localhost:3000/dishes/delete/${dish.id}`);
}

可选优化（符合RESTful规范）

可以简化后端路由路径，去掉冗余的action标识，更符合通用接口设计规范：

// dishes.controller.ts 调整后代码
@Patch(':id')
async update(@Param('id', ParseIntPipe) id: number, @Body() dish: Dish): Promise<any> {
    dish.id = id
    return this.dishesService.update(dish);
}

@Delete(':id')
async delete(@Param('id', ParseIntPipe) id: number): Promise<any> {
    return this.dishesService.delete(id);
}

调整后前端请求路径对应改为http://localhost:3000/dishes/${dish.id}即可。