Django无法从request.POST获取Vue3前端axios提交的POST数据

Django 的 request.POST 仅支持解析两种请求格式的数据：

• application/x-www-form-urlencoded：普通表单提交的默认格式
• multipart/form-data：带文件上传的表单格式

你最初发起axios请求时，请求头的Content-Type是application/json，这种JSON格式的请求体不会被Django自动解析到request.POST中，所以你会看到request.body里有完整的参数，但request.POST是空对象。

另外你最初的参数校验逻辑存在错误：if {'username', 'password'} >= set(request.POST):的判断写反了，正确的包含判断应该是set(request.POST) >= {'username', 'password'}，就算请求参数正常写入request.POST，你原来的判断逻辑也会返回校验不通过。

方案1：后端适配JSON请求（更适合前后端分离场景） #

不需要修改前端原有代码，直接在Django视图中手动解析JSON格式的请求体即可，修改后的视图代码参考：

import json
from django.http import HttpRequest, JsonResponse

# Sign user in and issue token
@require_http_methods(['POST'])
def login(request: HttpRequest):
    # 解析JSON请求体
    try:
        req_data = json.loads(request.body)
    except json.JSONDecodeError:
        return JsonResponse(
            data={'message': '请求参数格式错误'},
            content_type='application/json',
            status=400
        )
    # 校验必填参数
    if 'username' not in req_data or 'password' not in req_data:
        return JsonResponse(
            data={'message': 'Please provide all required fields.'},
            content_type='application/json',
            status=400
        )
    # 后续逻辑将原有的request.POST替换为req_data即可
    if User.objects.filter(username=req_data['username']).exists():
        user = User.objects.get(username=req_data['username'])
        # 注意：明文存储、比对密码存在极高安全风险，建议使用Django自带的auth.authenticate方法做密码校验
        if user.password == req_data['password']:
            # Delete previously issued tokens
            Token.objects.filter(user_id=user.id).delete()
            token = Token(user_id=user.id)
            token.save()
            return JsonResponse(data={'userToken': token.to_json()},
                                content_type='application/json',
                                status=200)
    else:
        return JsonResponse(
            data={'message': 'Incorrect username or password.'},
            content_type='application/json',
            status=400
        )

方案2：前端发送表单格式数据（即你当前的解决方案） #

你现在将参数封装为FormData对象、设置Content-Type为multipart/form-data的修改是正确的，配合调整后的参数校验逻辑可以正常拿到请求参数。

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