Django接收React登录表单POST数据为空问题求助

问题根源 #

1. 数据格式不匹配：Axios默认发送application/json格式的请求体，但Django的request.POST仅处理application/x-www-form-urlencoded或multipart/form-data类型的表单数据，直接读取request.POST会返回空字典。
2. 前端键名错误：你在Axios请求里写的'username:'和'Password:'多了末尾的冒号，且Password大小写与后端预期的password不一致，就算格式正确也无法拿到对应值。

两种解决办法 #

办法一：前端发送表单编码数据 #

修改React的handleSubmit函数，用FormData包装数据发送，后端无需改动即可通过request.POST获取数据：

const handleSubmit = (event) => {
    event.preventDefault();

    console.log('username:', formData.username);
    console.log('Password:', formData.password);

    // 用FormData构造表单格式数据
    const form = new FormData();
    form.append('username', formData.username);
    form.append('password', formData.password);

    axios.post(baseurl + 'customer/login/', form)
    .then(function (response) {
        console.log(response.data);
    })
    .catch(function (error) {
        console.log(error);
    });

    setFormData({
        username: '',
        password: ''
    });
};

办法二：后端解析JSON数据 #

如果希望保持前端发送JSON格式的请求，修改Django视图函数，从request.body中解析JSON数据：

import json
from django.http import JsonResponse

@csrf_exempt
def customer_login(request):
    if request.method == 'POST':
        # 解析JSON格式的请求体
        data = json.loads(request.body)
        print(data)
        msg={
            'bool':True,
            "data": data
        }
        return JsonResponse(msg)

同时修正前端的键名错误（去掉冒号，统一使用小写password）：

axios.post(baseurl + 'customer/login/',{
    username: formData.username,
    password: formData.password,
})

额外提醒 #

• 不要长期使用@csrf_exempt，生产环境必须添加CSRF验证。可以在React中从Django的Cookie中获取CSRF令牌，然后在Axios请求头中携带X-CSRFToken字段。
• 推荐使用Django REST Framework（DRF）构建API，其Request对象会自动解析JSON、表单等多种格式的数据，无需手动处理request.body，开发效率更高。

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