Django中发送CSV处理数据到views.py时出现CSRF令牌缺失错误

问题本质 #

你遇到的403错误看似是CSRF token缺失，实际是嵌套JSON数据未正确序列化+AJAX请求格式配置不当，导致Django无法正确识别CSRF token或解析请求内容。

分步解决方案 #

1. 修正JavaScript的AJAX请求配置

需要将嵌套对象转为JSON字符串，通过请求头传递CSRF token，并明确指定请求内容类型：

const form = document.getElementById('myForm')
form.addEventListener('submit', sendData);

function sendData(event){
    event.preventDefault();
    const res = { 0:{"val1": 1, "val2":2}, 1:{"val1": 3, "val2":4}}
    // 获取页面中的CSRF token
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    // 从表单获取正确的API地址（避免相对路径问题）
    const apiUrl = form.getAttribute('data-url');

    $.ajax({
        type: "POST",
        url: apiUrl,
        headers: {
            'X-CSRFToken': csrfToken, // 通过请求头传递CSRF token
            'Content-Type': 'application/json'
        },
        data: JSON.stringify({ "result": res }), // 序列化嵌套JSON结构
        dataType: "json",
        success: function () { alert("数据提交成功") },
        error: function () { alert("数据提交失败"); }
    })
}

2. 更新HTML表单，补充正确的API路径

在form标签中加入data-url属性，用Django的{% url %}标签生成绝对路径，避免页面路由变化导致请求地址错误：

<form id="myForm" method="POST" data-url="{% url 'addDataInDB' %}">
    {% csrf_token %}
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <button type="submit">Envoyer</button>
</form>
...
<script src="{% static 'js/readCSV.js' %}"></script>

3. 修改Django视图函数，正确解析JSON数据

后端需要从request.body读取JSON数据（而非request.POST），同时必须返回合法的HTTP响应：

import json
from django.http import JsonResponse

def addDataInDB(request):
    if request.method == "POST":
        # 解析JSON格式的请求体
        data = json.loads(request.body)
        result_data = data.get('result')
        print(result_data)
        # 在此处添加数据存入数据库的逻辑
        return JsonResponse({"status": "success"})
    return JsonResponse({"status": "error"}, status=400)

def getDataFromCSV(request):
    return render(request, 'getDataFromCSV.html', {})

核心注意事项 #

• CSRF传递：通过X-CSRFToken请求头传递比嵌入表单数据更可靠，避免复杂数据结构导致的序列化冲突。
• JSON序列化：嵌套对象必须用JSON.stringify()转为字符串，同时设置Content-Type: application/json，后端才能正确解析。
• URL正确性：使用{% url %}生成绝对路径，避免页面路由层级变化引发的请求地址错误。

内容的提问来源于stack exchange，提问作者problème0123