如何通过POST请求将React中的JSON数据传递至Django后端？

实现思路评估 #

整体实现思路是对的，通过POST请求携带JSON格式的数组数据到Django后端的逻辑没问题，但Django侧接收数据的写法存在错误，核心问题是：
你前端提交的是Content-Type: application/json格式的请求体，Django的request.POST仅用来解析表单格式（application/x-www-form-urlencoded或multipart/form-data）的请求，因此你无法通过request.POST.get()拿到数据，不管传入什么参数都不行。

修正方案 #

1. 前端代码补充调整 #

首先补全CSRF Token（Django默认开启CSRF校验，不带会返回403错误），同时修正请求地址末尾的斜杠（和urls.py配置匹配，避免Django重定向导致POST失效）：

// 可以安装js-cookie库拿cookie里的csrftoken，也可以自己手写读取cookie的方法
import Cookies from 'js-cookie'

const [dataSource, setDataSource] = useState([]); 

const requestOptions = {
    method: "POST",
    headers: { 
        "Content-Type": "application/json",
        "X-CSRFToken": Cookies.get('csrftoken') // 新增csrf校验头
    },
    body: JSON.stringify(dataSource),
};

const handleSubmit = () => {
    // 末尾加斜杠和urls.py匹配
    fetch("http://localhost:8000/insert/", requestOptions)
    .then(res => res.json())
    .then(data => console.log('提交成功', data))
    .catch(err => console.error('提交失败', err))
};

<Popconfirm onConfirm={handleSubmit}>
    <Button>Submit</Button>
</Popconfirm>

如果临时调试不想处理CSRF，可以跳过这步，直接给后端视图加@csrf_exempt装饰器即可（生产环境不推荐）。

2. 后端views.py修正写法 #

直接从request.body读取原始请求体，再用json模块解析即可拿到你传的数组：

import json
from django.http import HttpResponseBadRequest, JsonResponse
# 如果要临时关闭csrf校验，导入下面的装饰器
# from django.views.decorators.csrf import csrf_exempt

# @csrf_exempt  # 临时关闭csrf校验的话加这个装饰器
def insert(request):
     if request.method == 'POST':
           try:
               # 直接解析请求体，拿到的就是前端传的数组
               data_source = json.loads(request.body)
               # 这里可以写你自己的业务逻辑，比如存库之类的
               print('拿到的数组：', data_source)
               return JsonResponse({'status': 'success', 'msg': '提交成功'})
           except json.JSONDecodeError:
               return HttpResponseBadRequest('JSON格式错误')

     return render(request, 'frontend/index.html')

3. urls.py不需要改动，你的现有配置是正确的。 #

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