Postman form-data请求正常 raw及服务端无法发送注册令牌问题

后端使用Django原生View时，request.POST.get('email')的写法仅能解析application/x-www-form-urlencoded、multipart/form-data（即Postman的form-data格式）的请求参数，无法读取application/json格式（Postman raw JSON、前端默认发送的JSON请求）的传参。此时取到的data值为None，自然无法正常创建用户、发送验证邮件。

1. 后端代码调整 #

Django默认不会自动解析JSON格式请求体，需要手动从request.body加载JSON数据后再取参，同时顺手优化下原有代码的冗余逻辑：

import json
from django.http import JsonResponse
from django.views import View
from django.core.mail import send_mail
from .models import Registration

class RegisterView(View):
    def post(self, request, *args, **kwargs):
        # 同时兼容JSON和form-data两种传参格式
        if request.content_type == "application/json":
            body_data = json.loads(request.body)
            data = body_data.get('email')
        else:
            data = request.POST.get('email')

        # 优化原有全表查询逻辑，直接判断邮箱是否存在效率更高
        if Registration.objects.filter(email=data).exists():
            return JsonResponse('Email already provided', safe=False, status=200)
        
        # create方法本身会完成数据库写入，不需要额外调用save()
        new_user = Registration.objects.create(email=data)
        content = {'code': new_user.code}
        send_mail(
            "Thanks for Registering",
            f'Here is your signup Token:{content}',
            'djangod192@gmail.com',
            [data],
            fail_silently=False,
        )
        return JsonResponse(content, status=201)

如果后续接口都统一用JSON传参，也可以直接用Django REST Framework的APIView，框架会自动解析JSON请求体，直接通过request.data就能拿到参数，不用手写解析逻辑。

2. 前端代码补全 #

现有前端逻辑没有等待接口返回就直接跳转路由，也没有错误捕获，很容易出现接口请求失败但用户已经进入下一步的问题，调整请求部分代码即可：

const sendVerificationCode = async (event) => {
    event.preventDefault();
    if (email.length > 0) {
        const data = {
            email: email
        };
        const fetchConfig = {
            method: 'POST',
            headers: new Headers({
                "Content-Type": "application/json",
            }),
            body: JSON.stringify(data),
        };
        try {
            const response = await fetch(url,fetchConfig)
            const res = await response.json()
            // 可在此处增加接口返回状态校验，确认验证码发送成功再跳转
            const action = {
                type:"setEmail",
                payload:email
            };
            dispatch(action)
            navigate("/SignUpStep2")
        } catch (err) {
            alert("验证码发送失败，请稍后重试")
        }
    } else {
        alert("please enter email address");
    }
}

修改完成后，用Postman选择raw+JSON格式传入{"email":"测试邮箱地址"}即可正常收到邮件，前端发起的请求也能正常触发邮件发送逻辑。

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