如何处理React发送至Django的POST请求并写入模型

1. 提前完成Django基础配置 #

• 首先解决跨域问题：React和Django默认端口不同，会触发跨域拦截，需要安装django-cors-headers配置：
  • 安装命令：pip install django-cors-headers
  • 在settings.py的INSTALLED_APPS中添加corsheaders
  • 在MIDDLEWARE列表最顶部插入corsheaders.middleware.CorsMiddleware
  • 开发阶段可以临时配置CORS_ALLOW_ALL_ORIGINS = True，生产环境替换为你的React部署域名即可
• 推荐搭配Django REST Framework（DRF）做参数校验和请求处理，安装命令：pip install djangorestframework，安装后在INSTALLED_APPS添加rest_framework

2. 定义Django模型与序列化器 #

假设你需要存储用户提交的留言数据，示例如下：

模型定义（models.py） #

from django.db import models

class Message(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    create_time = models.DateTimeField(auto_now_add=True)

序列化器定义（新建serializers.py放在对应app目录下） #

序列化器用来自动校验入参格式，避免非法数据写入数据库：

from rest_framework import serializers
from .models import Message

class MessageSerializer(serializers.ModelSerializer):
    class Meta:
        model = Message
        # 仅允许前端传入这两个字段，防止恶意参数注入
        fields = ['title', 'content']

3. 编写Django视图处理POST请求 #

方式1：使用DRF的APIView（推荐） #

自动完成JSON解析、格式校验、响应格式化，代码更简洁：

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .serializers import MessageSerializer

class MessageView(APIView):
    def post(self, request):
        # 自动校验请求数据是否符合序列化器规则
        serializer = MessageSerializer(data=request.data)
        if serializer.is_valid():
            # 校验通过直接写入数据库
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        # 校验失败返回错误信息
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

对应路由配置（urls.py）：

from django.urls import path
from .views import MessageView

urlpatterns = [
    path('api/messages/', MessageView.as_view(), name='message-create'),
]

方式2：使用原生Django视图（无需安装DRF） #

如果不想引入DRF，可以自己解析请求体完成处理：

from django.http import JsonResponse
from django.views.decorators.http import require_http_methods
from django.views.decorators.csrf import csrf_exempt
import json
from .models import Message

# 开发环境临时关闭CSRF校验，生产环境建议把CSRF Token传给React放在请求头
@csrf_exempt
# 限制仅接受POST请求
@require_http_methods(["POST"])
def create_message(request):
    try:
        # 解析JSON格式的请求体
        data = json.loads(request.body)
        # 手动校验必填参数
        if not data.get('title') or not data.get('content'):
            return JsonResponse({'error': 'title和content为必填项'}, status=400)
        # 写入模型
        message = Message.objects.create(
            title=data['title'],
            content=data['content']
        )
        return JsonResponse({'id': message.id, 'title': message.title, 'content': message.content}, status=201)
    except json.JSONDecodeError:
        return JsonResponse({'error': '请求格式错误，需要JSON类型'}, status=400)

对应路由配置：

path('api/messages/', create_message, name='message-create'),

4. React侧发送POST请求示例 #

fetch写法 #

const postMessage = async () => {
  const requestData = {
    title: "测试标题",
    content: "这是测试的留言内容"
  };
  try {
    const response = await fetch('http://你的Django服务地址/api/messages/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(requestData),
    });
    const result = await response.json();
    if (response.ok) {
      console.log('提交成功', result);
    } else {
      console.log('提交失败', result);
    }
  } catch (error) {
    console.log('请求异常', error);
  }
}

axios写法 #

import axios from 'axios';

const postMessage = async () => {
  const requestData = {
    title: "测试标题",
    content: "这是测试的留言内容"
  };
  try {
    const response = await axios.post('http://你的Django服务地址/api/messages/', requestData);
    console.log('提交成功', response.data);
  } catch (error) {
    console.log('提交失败', error.response?.data || error.message);
  }
}

注意事项 #

• 生产环境不要关闭CSRF校验，可以额外写一个接口返回CSRF Token，React请求时把Token放到请求头的X-CSRFToken字段即可
• 所有前端传入的参数必须做校验，禁止直接把前端传的所有字段批量写入数据库，避免数据污染
• 如果有文件上传需求，请求头的Content-Type要改为multipart/form-data，Django侧从request.FILES中获取文件数据

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