Vue+Axios调用Django接口更新数据时出现500内部服务器错误

根据你描述的现象（POST请求正常、PUT请求报JSON解析错误），核心问题是PUT请求没有正确传递JSON格式的请求体，导致Django后端无法解析内容。以下是具体排查点和修复方案：

1. 修正Axios PUT请求的参数传递方式 #

很多开发者会混淆Axios的参数结构：

• POST请求的正确结构是 axios.post(url, data, config)，更新数据放在第二个参数位置
• 若你错误地把PUT请求的数据放到params参数中（比如axios.put(url, { params: formData })），后端将无法获取到请求体内容，直接触发JSON解析失败。

正确写法示例：

// 假设你的表单数据是formData对象
axios.put(`/api/supply/${id}`, formData, {
  headers: {
    'Content-Type': 'application/json' // 显式声明格式，避免自动推断异常
  }
})

2. 确保请求头包含Content-Type: application/json #

虽然Axios默认会为JSON数据自动设置该请求头，但如果你的代码中手动修改了全局headers，或者表单数据是FormData格式（POST可能兼容，但PUT不兼容），会导致头信息丢失。显式设置可以避免这类问题。

3. 后端视图需正确处理PUT请求的JSON数据 #

如果使用Django REST Framework（DRF）：

• 确保视图继承APIView或ModelViewSet，DRF会自动解析request.body为request.data（已解析的JSON对象）
• 不要使用request.POST来获取PUT请求的数据，request.POST仅处理表单编码的POST请求

DRF视图正确示例：

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .models import Supply
from .serializers import SupplySerializer
from django.shortcuts import get_object_or_404

class SupplyUpdateAPIView(APIView):
    def put(self, request, pk):
        supply = get_object_or_404(Supply, pk=pk)
        serializer = SupplySerializer(supply, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

如果是普通Django视图：
需要手动解析request.body的内容，而不是用request.POST：

import json
from django.http import JsonResponse
from .models import Supply

def update_supply(request, pk):
    if request.method == 'PUT':
        try:
            data = json.loads(request.body)
        except json.JSONDecodeError:
            return JsonResponse({'error': 'Invalid JSON'}, status=400)
        supply = get_object_or_404(Supply, pk=pk)
        # 手动更新字段示例
        supply.name = data.get('name', supply.name)
        supply.save()
        return JsonResponse({'status': 'success'})

4. 验证表单数据格式 #

确保你传递给Axios的formData是合法的JavaScript对象，没有嵌套错误或未定义的字段。可以在调用Axios前打印JSON.stringify(formData)，检查是否是有效的JSON字符串。

内容的提问来源于stack exchange，提问作者Derick T.