Angular向Django后端发送HTTP DELETE请求失败问题排查

问题根源分析 #

1. JSON解析失败：后端尝试解析DELETE请求的JSON体，但前端实际未发送有效JSON或请求体为空，导致JSONParser().parse(request)抛出解析错误。
2. URL异常[object%20Object]：Angular的deleteDepartment方法错误地将传入的对象直接拼接到URL中，而非提取ID作为路径参数，导致URL格式失效。

解决方案 #

方案1：REST标准风格——URL路径传递ID（推荐） #

REST规范中，DELETE请求通常通过URL路径指定资源ID，而非请求体，这种方式更符合接口设计规范。

1. 修正Django后端视图

修改DELETE分支逻辑，直接从URL参数获取DepartmentId，无需解析请求体：

elif request.method == 'DELETE':
    if DepartmentId is not None:
        department = Departments.objects.get(DepartmentId=DepartmentId)
        department.delete()
        return JsonResponse("Deleted Successfully!!", safe=False)
    return JsonResponse("Invalid Department ID", status=400)

同时确保路由配置支持ID参数：

# urls.py示例
urlpatterns = [
    path('department/<int:DepartmentId>/', views.departmentApi),
]

2. 修正Angular前端代码

首先调整service中的deleteDepartment方法，仅传递ID拼接URL：

// Angular service文件
deleteDepartment(departmentId: number): Observable<any> {
  return this.http.delete(`/department/${departmentId}`);
}

然后修改组件调用逻辑：

deleteClick(item: any) {  
  if (confirm('Are you sure?')) {
    this.service.deleteDepartment(item.DepartmentId).subscribe(
      (data) => {
        alert(data.toString());
        this.refreshDepList();
      },
      (error) => {
        console.log('Error occurred while deleting the department:', error);
        alert('Error occurred while deleting the department.');
      }
    );  
  } 
}

方案2：保留请求体传递（不推荐） #

若必须通过请求体传递数据，需确保Angular正确发送DELETE请求的Body：

1. 修正Angular service的delete方法

Angular的HttpClient.delete默认不发送请求体，需手动配置body参数：

deleteDepartment(department: any): Observable<any> {
  return this.http.delete('/department/', { body: department });
}

2. 后端检查

保持现有DELETE逻辑，但需确认前端请求头包含Content-Type: application/json（Angular HttpClient默认会自动设置，若有自定义拦截器需避免覆盖）。

额外注意事项 #

• 修复Django视图缩进错误：你提供的DELETE分支代码存在缩进问题，department.delete()和返回语句需包含在elif块内，否则会导致逻辑异常：

  elif request.method == 'DELETE':
      department_data = JSONParser().parse(request)
      department=Departments.objects.get(DepartmentId=department_data['DepartmentId'])
      department.delete()  # 此处需缩进，确保仅DELETE请求执行
      return JsonResponse("Deleted Successfully!!", safe=False)
  

• 用浏览器开发者工具（Network标签）查看DELETE请求的URL和Request Body，确认数据是否正确发送，这是快速定位问题的关键。

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