React搭配原生Django使用时request.POST.get取值始终为空是什么原因？

核心原因 #

• axios发送application/x-www-form-urlencoded类型请求时，若直接传入JS对象作为data参数，axios默认会将对象序列化为JSON字符串而非符合表单编码格式的字符串。原生Django的request.POST仅能识别标准表单编码（x-www-form-urlencoded）或多部分表单（multipart/form-data）格式的请求体，无法解析JSON格式的请求内容，因此取值为空。
• request.data是Django REST framework封装的属性，原生Django不存在该属性，因此改用request.data取值自然无效。

可行解决方案 #

方案1：继续使用表单编码提交请求 #

不需要修改后端取值逻辑，只需调整前端axios的参数序列化方式，可选两种实现：

方式A：使用URLSearchParams（无需额外依赖）

修改axios的data字段即可，可省略Content-Type配置，axios会自动识别并设置正确值：

axios({
  method: 'post',
  responseType: 'json',
  url: `/auth/login/`,
  // 序列化对象为表单格式
  data: new URLSearchParams({
    'token': token,
    'username': 'yesy'
  }),
  headers:{
    'X-CSRFToken': csrf,
  }
})

方式B：使用qs库序列化（适合参数层级复杂的场景）

先安装qs库：npm install qs，再修改代码：

import qs from 'qs'

axios({
  method: 'post',
  responseType: 'json',
  url: `/auth/login/`,
  data: qs.stringify({
    'token': token,
    'username': 'yesy'
  }),
  headers:{
    'X-CSRFToken': csrf,
  }
})

修改完成后，后端仍可通过request.POST.get('token')正常获取参数。

方案2：改为JSON格式提交请求 #

如果业务场景更适合传JSON格式参数，可按如下方式调整前后端逻辑：

1. 前端修改Content-Type为application/json：

axios({
  method: 'post',
  responseType: 'json',
  url: `/auth/login/`,
  data: JSON.stringify({
    'token': token,
    'username': 'yesy'
  }),
  headers:{
    'X-CSRFToken': csrf,
    "Content-Type": "application/json",
  }
})

2. 后端原生Django视图中手动解析请求体：

import json

def login_view(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        token = data.get('token', '')
        username = data.get('username', '')
        # 后续业务逻辑

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