Django+React使用Axios POST无法访问JSON属性的问题

一、Axios 请求的问题 #

你当前用 JSON.stringify(postData) 手动序列化数据发送，这会导致两个核心问题：

1. Axios 默认将字符串类型的请求体识别为 application/x-www-form-urlencoded 格式，而非 JSON。
2. Django 的 request.POST 仅解析表单编码的数据，无法识别这种方式发送的 JSON 字符串。

修正后的 Axios 代码 #

直接传递对象即可，Axios 会自动帮你序列化 JSON 并设置正确的 Content-Type: application/json 请求头：

const order = {
    order_id: 1,
    customer: {
        name: "Jonas Illver",
        age: 18
    }
}

const car = {
    model: 'XHL',
    brand: 'Toyota'
}

const postData = {
    order: order,
    car: car
}

// 去掉 JSON.stringify，直接传对象
const res = await axios.post("orders/shipping/create", postData);
console.log(res);

如果坚持要手动序列化，必须显式设置请求头：

const res = await axios.post("orders/shipping/create", JSON.stringify(postData), {
  headers: {
    'Content-Type': 'application/json'
  }
});

二、Django 视图的问题 #

你使用了 Django REST Framework (DRF) 的 @api_view，但仍在使用 request.POST —— 这是错误的。DRF 提供了 request.data 属性，它会自动解析 JSON、表单等多种格式的请求体，无需手动处理。

修正后的视图代码 #

from rest_framework.decorators import api_view, permission_classes
from rest_framework.permissions import IsAuthenticated
from django.http import JsonResponse, HttpResponse

@api_view(['POST'])
@permission_classes([IsAuthenticated])
def shipping_create_order(request):
    if request.method == 'POST':
        # 使用 request.data 获取解析后的 JSON 数据
        order = request.data.get('order')
        car = request.data.get('car')
        
        if not order:
            return HttpResponse("No order")
        
        # 处理你的业务逻辑
        return JsonResponse({
            'order': order,
            'car': car
        })

为什么之前的尝试失败？ #

1. order = request.POST['order']：request.POST 未解析 JSON 数据，不存在 order 键，触发 KeyError 导致 500 错误。
2. data = json.loads(request.POST)：request.POST 是 QueryDict 对象，不是 JSON 字符串，直接解析会报错。
3. order = request.POST.get('order')：request.POST 没有该键，返回 None，所以会进入 if not order 分支。

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