我的JavaScript Fetch API调用异常，Django后端request.POST为空是什么原因？

问题核心原因 #

你在前端Fetch请求中设置的Content-Type为application/json，而Django的request.POST属性仅会在请求格式为application/x-www-form-urlencoded或multipart/form-data（表单提交格式）时自动填充参数，JSON格式的请求体不会被自动解析到该属性中，因此打印结果为空。

排查步骤 #

• 首先验证请求体是否正常传输到后端：在视图中打印request.body，如果能输出你前端发送的JSON字符串，说明网络传输正常，仅参数解析方式有误。
• 其次校验请求头配置：在浏览器开发者工具的「网络」标签中找到对应POST请求，确认请求头的Content-Type是否为你设置的application/json，排除中间件或其他逻辑篡改请求头的可能。

解决方案 #

方案1：后端适配JSON请求（推荐）

直接手动解析request.body中的JSON内容即可，修改视图代码如下：

import json
from django.http import HttpResponseBadRequest

def post(self, request, *args, **kwargs):
    try:
        post_data = json.loads(request.body)
    except json.JSONDecodeError:
        return HttpResponseBadRequest("非法的JSON请求参数")
    print('解析后的请求参数：', post_data)
    # 后续直接从post_data中读取对应参数处理即可

如果你使用的是Django REST Framework框架，不需要手动解析，直接读取request.data即可拿到已经解析完成的请求参数。

方案2：前端改为发送表单格式请求（适配原有读取request.POST的逻辑）

如果不想修改后端代码，可以调整前端Fetch的配置，将请求改为表单格式：

// 将JSON格式的requestBody转为表单格式
const formParams = new URLSearchParams();
for (const [key, valArr] of Object.entries(requestBody)) {
    // 原有参数值为数组，按表单逻辑取第一个值传入即可
    formParams.append(key, valArr[0]);
}

const res = fetch(url, {
  credentials: 'include',
  method: 'POST',
  mode: 'same-origin',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-CSRFToken': csrftoken
  },
  body: formParams,
  })
  .then((response) => response.json())
  .then((responseJson) => {
    return responseJson.movies;
  })
  .catch((error) => {
    console.error(error);
  });

修改后后端直接读取request.POST即可拿到参数。

补充提示 #

你已经在请求头中携带了X-CSRFToken，请求体中的csrfmiddlewaretoken参数可以不用重复提交，Django会优先校验请求头中的CSRF令牌。

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