如何在Django REST Framework中格式化错误响应为指定JSON结构

一、后端Django DRF侧改造（实现指定错误返回格式） #

你需要修改DRF的错误输出逻辑，将默认的字段级错误数组结构，转换为你需要的{"error": "具体错误信息"}格式，两种可选方案：

方案1：全局异常处理（推荐，统一所有接口错误格式） #

1. 在你的项目应用目录下新建exception_handler.py文件，写入以下代码：

from rest_framework.views import exception_handler
from rest_framework import status

def custom_exception_handler(exc, context):
    # 先调用DRF默认的异常处理拿到响应
    response = exception_handler(exc, context)
    # 针对400错误改造返回格式
    if response is not None and response.status_code == status.HTTP_400_BAD_REQUEST:
        # 提取第一个错误字段的第一条错误信息
        first_error_msg = next(iter(response.data.values()))[0]
        response.data = {"error": first_error_msg}
    return response

2. 在settings.py中配置DRF使用自定义异常处理器：

REST_FRAMEWORK = {
    # 替换为你实际的应用名
    'EXCEPTION_HANDLER': '你的应用名.exception_handler.custom_exception_handler',
    # 保留你原有其他DRF配置
}

方案2：仅修改当前序列化器的错误格式 #

如果不想全局修改，只需调整UserCreateSerializer即可：

from rest_framework import serializers

class UserCreateSerializer(UserCreateSerializer):
    class Meta:
        model = User
        fields = ('id', 'first_name', 'last_name', 'email', 'phone', 'stream', 'school', "password", )
    
    def to_internal_value(self, data):
        try:
            return super().to_internal_value(data)
        except serializers.ValidationError as e:
            # 提取第一条错误信息，改造返回格式
            first_error_msg = next(iter(e.detail.values()))[0]
            raise serializers.ValidationError({"error": first_error_msg})

二、前端React侧改造（正确获取完整错误信息） #

控制台只输出400状态码是因为你没有解析错误响应的响应体，按照你使用的请求工具对应修改即可：

使用fetch请求的示例代码 #

fetch('http://127.0.0.1:8000/users/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(你的请求参数对象)
})
.then(async response => {
  if (!response.ok) {
    // 错误响应也需要手动解析JSON内容
    const errData = await response.json()
    throw new Error(errData.error)
  }
  return response.json()
})
.catch(error => {
  // 这里即可打印完整错误信息
  console.log('接口报错：', error.message)
})

使用axios请求的示例代码 #

axios.post('http://127.0.0.1:8000/users/', 你的请求参数对象)
.then(res => {
  console.log('请求成功', res.data)
})
.catch(err => {
  // 错误响应内容在err.response.data中
  if (err.response) {
    console.log('接口报错：', err.response.data.error)
  }
})

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