Есть ли способ решить эту проблему? "Uncaught (in promise) SyntaxError: Неожиданная лексема < в JSON в позиции 0"

Я пытаюсь отправить данные в django backend с помощью javascript, чтобы обновить элемент корзины каждый раз, когда пользователь добавляет товар в корзину и при добавлении товара несколько раз. Я хочу, чтобы номер заказа обновлялся каждый раз, когда это происходит. Я выполнил все процедуры, как указано в руководстве, но каждый раз, когда я отправлял данные, я видел, что он бросает "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" ошибка, которую я не могу решить. Спасибо за любую помощь.

Я включил следующее в теги head

<script>
    var user = '{{request.user}}'

    function getToken(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();

                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    const csrftoken = getToken('csrftoken');
</script>

А это в моем файле cart.js:

var updateBtns = document.getElementsByClassName('update-cart')
for(i = 0; i < updateBtns.length; i++) {
updateBtns[i].addEventListener('click', function(){
    var productId = this.dataset.product
    var action = this.dataset.action
    console.log('productId:', productId, 'action:', action)

    console.log('USER:', user)
    if(user === 'AnonymousUser'){
        console.log('Not logged in')
    }else{
        updateUserOrder(productId, action)
    }
})
}

function updateUserOrder(productId, action){
console.log('User is logged in, sending data...')

var url = '/update_item/'

fetch(url, {
    method:'POST',
    headers:{
        'Content-Type':'application/json',
        'X-CSRFToken':csrftoken,
    },
    body:JSON.stringify({'productId':productId, 'action':action})
})

.then((response) =>{
    return response.json()
})

.then((data) =>{
    console.log('data:', data)
    location.reload()
})
}

У меня следующие взгляды:

def updateItem(request):
    data = json.loads(request.data)
    productId = data['productId']
    action = data['action']

    print('Action:', action)
    print('productId:', productId)

    customer = request.user.customer
    product = Product.objects.get(id=productId)
    order, created = Order.objects.get_or_create(customer=customer, complete=False)
    orderItem, created = Order.objects.get_or_create(order=order, product=product)    

    if action == 'add':
        orderItem.quantity = (orderItem.quantity + 1)
    elif action == 'remove':
        orderItem.quantity = (orderItem.quantity - 1)

    orderItem.save()

    if orderItem.quantity <= 0:
        orderItem.delete()
    
    return JsonResponse('Item was added', safe=False)

def cart(request):  
    if request.user.is_authenticated:
        customer = request.user.customer
        order, created = Order.objects.get_or_create(customer=customer, complete=False)
        items = order.orderitem_set.all()
        cartItems = order.get_cart_items
    else:
        items = []
        order = {'get_cart_total':0, 'get_cart_items':0}
        cartItems = order['get_cart_items']
    
    context = {'items':items, 'order':order, 'cartItems':cartItems}
    return render(request, 'base/cart.html', context)

Шаблоны:

                                        {% for product in products %}
                                        <div class="col-xl-3 col-lg-4 col-md-4 col-12">
                                            <div class="single-product">
                                                <div class="product-img">
                                                    <a href="product-details.html">
                                                        <img class="default-img" src="{{product.imageURL}}" alt="#">
                                                        <img class="hover-img" src="{{product.imageURL}}" alt="#">
                                                    </a>
                                                    <div class="button-head">
                                                        <div class="product-action product">
                                                            <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
                                                            <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                                            <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                                                        </div>
                                                        <div class="product-action-2">
                                                            <strong data-product="{{product.id}}"  data-action="add" class="add-btn update-cart" title="Add to cart">Add to cart</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="product-content">
                                                    <h3><a href="product-details.html">{{product.name}}</a></h3>
                                                    <div class="product-price">
                                                        <span>${{product.price|floatformat:2}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}

шаблон корзины (затронутые строки)

<div class="input-group">
                                    <div class="button minus">
                                        <button type="button" data-product={{item.product.id}} data-action="remove" class="btn btn-primary btn-number update-cart">
                                            <i class="ti-minus"></i>
                                        </button>
                                    </div>
                                    <input type="text" class="input-number" value="{{item.quantity}}">
                                    <div class="button plus">
                                        <button type="button" data-product={{item.product.id}} data-action="add" class="btn btn-primary btn-number update-cart">
                                            <i class="ti-plus"></i>
                                        </button>
                                    </div>
                                </div>

Вернуться на верх