Django+React结账系统点击加入购物车返回404无法添加商品求助

404错误根因 #

你Django侧配置的路由是无参数的add-to-cart/，但React发起的POST请求地址末尾拼接了商品ID，实际请求路径为/add-to-cart/[商品ID]，两边路径规则不匹配，Django无法找到对应接口所以返回404。

404修复方案（二选一即可） #

方案1：修改Django路由适配路径参数

修改urls.py配置，接收路径中的商品ID：

path('add-to-cart/<int:id>/', add_to_cart_view.as_view(), name='add-to-cart'),

同时调整视图的post方法，接收路径参数：

def post(self, request, id, *args, **kwargs):
    # 可以删除原来的 id = request.data.get('id', None) 代码，直接用上方传入的id参数

方案2：修改React请求逻辑，把ID放在请求体传递

不需要调整Django路由，修改React侧的post请求，把ID放在请求体中，路径和Django配置对齐：

const res = await axios.post(`${AddToCartURL}/add-to-cart/`, {id: id});

其他代码bug修复（404解决后会遇到的问题） #

1. 按钮跳转页面问题：如果修复404后点击按钮仍触发页面刷新/跳转，给button标签添加type="button"属性，禁用默认的表单提交行为：

<button type="button" color='primary' onClick={() => handleAddToCartURL(product.id)}>
    <AddShoppingCartIcon />
</button>

2. Django视图逻辑错误：

• get_or_create返回值是(实例对象, 是否为新创建的布尔值)，不是查询集，不能调用exists()方法
• 不能用Product实例product调用objects方法创建订单商品，需要替换为你自己定义的订单商品模型（示例假设模型名为OrderProduct）
• 修改后的视图核心逻辑参考：

class add_to_cart_view(APIView):
    def post(self, request, *args, **kwargs):
        # 用方案1的话这里参数改成id，直接用即可
        id = request.data.get('id', None)
        if id is None:
            return Response({"message": "Invalid request. Ensure you have added products to the cart"}, status=HTTP_400_BAD_REQUEST)

        product = get_object_or_404(Product, id=id)
        # 替换为你的订单商品模型
        order_product, created = OrderProduct.objects.get_or_create(
            product=product,
            user=request.user,
            ordered=False
        )
        # 不是新创建的商品，数量+1
        if not created:
            order_product.quantity += 1
            order_product.save()
        
        order_qs = Order.objects.filter(user=request.user, ordered=False)
        if order_qs.exists():
            order = order_qs.first()
            if not order.products.filter(product__id=order_product.id).exists():
                order.products.add(order_product)
        else:
            ordered_date = timezone.now()
            order = Order.objects.create(user=request.user, ordered_date=ordered_date)
            order.products.add(order_product)
        return Response(status=HTTP_200_OK)

内容的提问来源于stack exchange，提问作者C-Bizz