Angular发送Delete请求时出现HttpErrorResponse错误求助

问题场景 #

在movie.component.ts页面发送Delete请求删除影评时，控制台报HttpErrorResponse错误，无法完成删除操作。

相关代码 #

前端：movie.component.ts #

deleteReview(reviewID: any) {
  this.webService.deleteReview(reviewID).subscribe((res) => {
    alert('Review deleted');
  });
}

前端：web.service.ts #

deleteReview(id: any) {
  return this.http.delete(
    'http://localhost:5000/api/v1.0/movies' + id + '/reviews/' + this.reviewID
  );
}

后端（Flask） #

@app.route("/api/v1.0/movies/<string:id>/reviews/<string:reviewID>", methods=["DELETE"])
def delete_review(id, reviewID):
    movies.update_one(
        {"_id": ObjectId(id)},
        {"$pull": {"reviews": {"_id": ObjectId(reviewID)}}}
    )
    return make_response(jsonify({}), 204)

问题排查及修正方案 #

1. URL构造错误

   • 后端路由要求格式为/movies/[电影ID]/reviews/[评论ID]，但前端拼接URL时存在两个问题：
     • 缺少斜杠：'movies' + id会拼接成movies123这类错误格式，正确写法应该是'movies/' + id
     • 参数传递混乱：web.service.ts的deleteReview方法接收的参数是id，但组件调用时传的是reviewID，同时方法里还使用了this.reviewID，导致URL中的两个ID都不匹配后端要求。

   修正后的web.service.ts：

   deleteReview(movieId: any, reviewId: any) {
     return this.http.delete(
       `http://localhost:5000/api/v1.0/movies/${movieId}/reviews/${reviewId}`
     );
   }
   

   组件调用时需同时传入电影ID和评论ID：

   deleteReview(movieId: any, reviewID: any) {
     this.webService.deleteReview(movieId, reviewID).subscribe((res) => {
       alert('Review deleted');
     });
   }
   

2. 204状态码响应解析问题

   • 后端返回204（No Content）状态码，Angular的HttpClient默认会尝试解析JSON响应，但204没有响应体，会触发解析错误。需在请求中添加配置：

   deleteReview(movieId: any, reviewId: any) {
     return this.http.delete(
       `http://localhost:5000/api/v1.0/movies/${movieId}/reviews/${reviewId}`,
       { responseType: 'text' } // 或配置{ observe: 'response' }
     );
   }
   

3. ID格式有效性校验

   • 后端使用ObjectId(id)转换ID，如果前端传入的ID不是有效的MongoDB ObjectId格式，会抛出错误。建议后端添加错误捕获，返回明确错误信息：

   from bson.errors import InvalidId
   
   @app.route("/api/v1.0/movies/<string:id>/reviews/<string:reviewID>", methods=["DELETE"])
   def delete_review(id, reviewID):
       try:
           movies.update_one(
               {"_id": ObjectId(id)},
               {"$pull": {"reviews": {"_id": ObjectId(reviewID)}}}
           )
           return make_response(jsonify({}), 204)
       except InvalidId:
           return make_response(jsonify({"error": "无效的ID格式"}), 400)
   

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