Django自定义登录视图无法获取POST参数问题求助

你的核心问题是Django视图尝试从request.POST获取参数，但React和Postman发送的是JSON格式数据，request.POST无法解析JSON请求体，导致usuario和clave始终为None。

解决方案1：修改Django视图支持JSON请求 #

直接在视图中解析JSON请求体，同时兼容传统表单提交：

import json
from django.http import JsonResponse
from django.contrib.auth import authenticate, login
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def custom_login(request):
    if request.method == 'POST':
        username = None
        password = None
        # 优先解析JSON请求体
        try:
            request_data = json.loads(request.body)
            username = request_data.get("usuario")
            password = request_data.get("clave")
        except json.JSONDecodeError:
            # 解析失败则尝试从表单数据获取
            username = request.POST.get("usuario")
            password = request.POST.get("clave")

        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return JsonResponse({'success': True})
        else:
            return JsonResponse({'success': False, 'message': 'Invalid credentials', 'username': username, 'password': password})

解决方案2：修改React发送表单编码数据 #

如果不想改动Django视图，可以让React发送application/x-www-form-urlencoded格式的数据（和传统表单提交一致）：

1. 先安装qs库用于格式化数据：

npm install qs

2. 修改React的请求代码：

import qs from 'qs';

const handleSubmit = async (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const loginData = {
        usuario: data.get('id'),
        clave: data.get('clave'),
    };

    try {
        const response = await axios.post(
            'http://localhost:8000/custom-login/',
            qs.stringify(loginData),
            {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': csfrtoken,
                },
            }
        );
        if (response.data.success) {
            console.log('Login successful:', response.data);
        } else {
            console.log('Login failed:', response.data.message);
        }
    } catch (error) {
        console.error('Login failed:', error.response?.data || error.message);
    }
};

额外优化：CSRF Token处理 #

当前React中的CSRF TextField会显示在页面上，建议改成隐藏输入框：

<input type="hidden" name="csrfmiddlewaretoken" value={csfrtoken} />

生产环境中建议移除@csrf_exempt，依赖正确的CSRF Token传递来保障安全。

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