Question

我正在开发一个具有 CRUD 功能的简单全栈项目。当我从 Angular 前端向 Nest JS 服务器发送 DELETE 和 PATCH 请求时，我在浏览器中收到 404 not found 错误。我已经验证我的 GET 请求和我的 POST 请求之一（用于创建新“菜肴”的请求）工作正常，我已经检查了 URL 和路由是否有错别字，但看起来不错。我确保我运行 npm run start:dev 来更新 dist 文件夹，终端中的路由浏览器说它已成功映射所有路由。我还确保问题不是由 CORS 引起的。当我尝试删除或修补/更新存储在 Postgresql 数据库中的“dish”时，我不确定为什么会出现这些 404 错误？

dishes.service.ts（角度）

 @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);
  }

}

dishes.controller.ts (NestJS)

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);
    }

}

dishes.service.ts (NestJS)

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);
    }
}

Answer 1

在您的 Angular 服务中，您只调用 post 方法。更新和删除分别使用 HTTP 动词 patch 和 delete。

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

注意到 this.http.post 了吗？这是一个 POST 请求，它应该是 this.http.delete。这就是您设置的那种端点，对吗？

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

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

1 个答案: