Angular 为什么在尝试向Nest JS服务器发送特定POST请求时会出现404错误？

我正在从事一个简单的具有CRUD功能的fullstack项目。当我从Angular前端向Nest JS服务器发送删除和修补请求时，浏览器中出现了404 not found错误。我已经验证了我的GET请求和我的一个POST请求（创建新“菜肴”的请求）工作正常，我已经检查了URL和路由是否有拼写错误，但看起来很好。我已经确保我运行了npm run start:dev来更新dist文件夹，并且终端中的route explorer表示它正在成功映射所有路由。我还确保问题不是由CORS造成的。当我试图删除或修补/更新Postgresql数据库中存储的“dish”时，我不知道为什么会出现这些404错误

disks.service.ts（角度）

@可注入({
providedIn:'根'
})
出口级餐饮服务{
构造函数（私有http:HttpClient）{}
getDistrips（）：可观察{
返回此.http.get（'http://localhost:3000/dishes');
}
查询（名称：字符串）：可观察{
返回this.http.get(`http://localhost:3000/dishes/query/${courine}`）；
}
后碟（碟：碟）{
返回此.http.post（'http://localhost:3000/dishes，dish）。订阅（数据=>{
});
}
//这会导致404错误
updateDish（dish:dish）{
返回this.http.post(`http://localhost:3000/dishes/update/${dish.id}`，dish）；
} 
//这会导致404错误
删除盘（盘：盘）{
返回this.http.post(`http://localhost:3000/dishes/delete/${dish.id}`，null）；
}
} 

disks.controller.ts（NestJS）

导出类DishesController{
构造函数（私有只读dishesService:dishesService）{}
@Post（）
异步创建（@Body（）dish:dish）：承诺{
返回此.disheservice.create（dish）；
}
@得到（）
异步findAll（）：承诺{
返回这个.disheservice.findAll（）；
}
@Get（'query/：courine'）
异步查询（@Param（'courine'）courine:string）：承诺{
返回此.dishesService.query（烹饪）；
}
//这会导致404错误
@修补程序（'update/：id'）
异步更新（@Param（'id'）id:number，@Body（）dish:dish）：承诺{
dish.id=id
返回此.dishservice.update（dish）；
}
//这会导致404错误
@Delete（'Delete/：id'）
异步删除（@Param（'id'）id:number）：承诺{
返回此.disheservice.delete（id）；
}
}

disks.service.ts（NestJS）

导出类DisheService{
构造器（@InjectRepository）（碟形）
专用只读光盘存储库：存储库
) {}
异步创建（dish:dish）：承诺{
返回等待此。盘存储。保存（盘）；
}
异步findAll（）：承诺{
返回此.dishesRepository.find（）；
}
异步查询（字符串）：承诺{
返回这个.dishesRepository.find（{where:{courine:courine}}）；
}
//这会导致404错误
异步更新（dish:dish）：承诺{
返回等待此.disherepository.update（dish.id，dish）；
}
//这会导致404错误
异步删除（id:number）：承诺{
返回此.dishesRepository.delete（id）；
}
}

在您的角度服务中，您只调用

post

方法。更新和删除分别使用HTTP动词

补丁

和

删除

//这会导致404错误
删除盘（盘：盘）{
返回this.http.post(`http://localhost:3000/dishes/delete/${dish.id}`，null）；
}

注意

this.http.post

？这是一个POST请求，应该是

this.http.delete

。这就是你设置的端点，对吗

//这会导致404错误
@Delete（'Delete/：id'）
异步删除（@Param（'id'）id:number）：承诺{
返回此.disheservice.delete（id）；
}

 @Injectable({
   providedIn: 'root'
 })
 export class DishesService {

  constructor(private http: HttpClient) { }

  getDishes(): Observable<any> {
    return this.http.get('http://localhost:3000/dishes');
  }

  query(cuisine: string): Observable<any> {
    return this.http.get(`http://localhost:3000/dishes/query/${cuisine}`);
  }

  postDish(dish: Dish) {
    return this.http.post('http://localhost:3000/dishes', dish).subscribe(data =>{
    });
  }

//this causes 404 error
  updateDish(dish: Dish) {
    return this.http.post(`http://localhost:3000/dishes/update/${dish.id}`, dish);
  } 

//this causes 404 error
  deleteDish(dish: Dish) {
    return this.http.post(`http://localhost:3000/dishes/delete/${dish.id}`, null);
  }

} 

export class DishesController {

    constructor(private readonly dishesService: DishesService) {}

    @Post()
    async create(@Body() dish: Dish): Promise<Dishes[]> {
        return this.dishesService.create(dish);
    }

    @Get()
    async findAll(): Promise<Dishes[]> {
        return this.dishesService.findAll();
    }

    @Get('query/:cuisine')
    async query(@Param('cuisine') cuisine: string): Promise<any> {
        return this.dishesService.query(cuisine);
    }

//this causes 404 error
    @Patch('update/:id')
    async update(@Param('id') id: number, @Body() dish: Dish): Promise<any> {
        dish.id = id
        return this.dishesService.update(dish);
    }

//this causes 404 error
    @Delete('delete/:id')
    async delete(@Param('id') id: number): Promise<any> {
        return this.dishesService.delete(id);
    }

}

export class DishesService {

    constructor(@InjectRepository(Dishes)
        private readonly dishesRepository: Repository<Dishes>
    ) {}

    async create(dish: Dish): Promise<any> {
        return await this.dishesRepository.save(dish);
    }

    async findAll(): Promise<Dishes[]> {
        return this.dishesRepository.find();
    }

    async query(cuisine: string): Promise<Dishes[]> {
        return this.dishesRepository.find({ where: { cuisine: cuisine } });
    }

//this causes 404 error
    async update(dish: Dish): Promise<UpdateResult> {
        return await this.dishesRepository.update(dish.id, dish);
    }

//this causes 404 error
    async delete(id: number): Promise<any> {
        return this.dishesRepository.delete(id);
    }
}