使用Django+Python+React时客户端向服务端传数据报错求助

1. 前端Axios协议缺失（直接触发"Unsupported protocol localhost:"） #

Axios的baseURL必须包含HTTP/HTTPS协议前缀，当前配置缺少协议导致请求解析失败。

修改后的Axios配置：

import Axios from "axios";
const $axios = Axios.create({
  baseURL: "http://localhost:8000/api/", // 补充http://协议
  headers: {
    "Content-Type": "application/json",
  },
});
$axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error("got error");
    console.error(error);
    throw error;
  }
);
// 其余代码保持不变

2. 前后端请求方法与路径不匹配 #

前端使用POST方法发送请求，但后端视图仅支持GET，且请求路径存在冗余拼接。

前端请求路径优化 #

当前url拼接后会重复PurchaseDetails路径，需调整为：

// 修改setPurchaseDetails中的请求url
return $axios({
  method: "post",
  url: `get_mock_PurchaseDetails/${id}`, // 去掉重复的PurchaseDetails
  data: bodyFormData,
  headers: { "Content-Type": "multipart/form-data" },
})

后端视图调整为支持POST #

修正视图的请求方法、参数逻辑与序列化逻辑：

from rest_framework import status
from rest_framework.decorators import api_view, renderer_classes
from rest_framework.renderers import JSONRenderer
from rest_framework.response import Response
from myStore.models import PurchaseDetails
from myStore.serializers import PurchaseDetailsSerializer

@api_view(['POST'])
@renderer_classes([JSONRenderer])
def get_mock_PurchaseDetails(request, id):
    # 从请求体提取参数
    items = request.data.get('items')
    name = request.data.get('name')
    price = request.data.get('price')
    cardNumber = request.data.get('cardNumber')
    idOfPerson = request.data.get('idOfPerson')
    
    # 使用关键字参数实例化模型（避免位置参数顺序错误）
    newData = PurchaseDetails(
        id=id,
        items=items,
        name=name,
        price=price,
        cardNumber=cardNumber,
        idOfPerson=idOfPerson
    )
    newData.save()
    
    # 序列化并返回保存的数据
    serializer = PurchaseDetailsSerializer(newData)
    return Response(serializer.data, status=status.HTTP_201_CREATED)

3. Django路由修正 #

原路由指向未被api_view装饰的普通函数，现在确保路由指向修正后的视图函数：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/PurchaseDetails/get_mock_PurchaseDetails/<int:id>',
         views.get_mock_PurchaseDetails),
]

4. 模型实例化规范修正 #

原代码使用位置参数实例化模型易出错，建议使用关键字参数。若无需手动指定id（AutoField默认自动生成），可省略该参数：

newData = PurchaseDetails(
    items=items,
    name=name,
    price=price,
    cardNumber=cardNumber,
    idOfPerson=idOfPerson
)

5. 前端请求格式优化（可选） #

若后端支持JSON格式，可简化请求无需使用FormData：

static setPurchaseDetails(id, items, name, price, cardNumber, idOfPerson) {
  return $axios({
    method: "post",
    url: `get_mock_PurchaseDetails/${id}`,
    data: { id, items, name, price, cardNumber, idOfPerson },
    headers: { "Content-Type": "application/json" },
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));
}

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