Server returning HTML instead of JSON

Hello!

Currently I am building an eCommerce website and while adding a “add to wish list”-functionality, I for some reason encounter this error in the console:

error

It is not really clear where in the code the return is HTML and not a JSON response. Could someone please help me out?

My JS code, using the Fetch API:

async function addToWishListFunction(e) {
        e.preventDefault();

        const singleProductId = e.currentTarget.dataset.singleProductId
        console.log(singleProductId)

        await fetch("", {
            method: "POST",
            headers: {
                "Accept": "application/json",
                "X-Requested-With": "XMLHttpRequest",
                "X-CSRFToken": csrftoken,
            },
            body: JSON.stringify({ "products": singleProductId }),
        })
            .then(response => {
                if (!response.ok) {
                    console.log("Response invalid")
                } else {
                    console.log("Response is valid")
                    return response.json();
                }
            })
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.log(error)
            })
    }

The view:

@login_required(redirect_field_name="authapp:signin")
def addtowishlist(request):
    if request.headers.get("X-Requested-With") == "XMLHttpRequest":
        try:
            posted_data = json.loads(request.body)
            print(posted_data)
        except json.JSONDecodeError:
            return JsonResponse({"error": "Invalid JSON data"}, status=400)

        wished_product = get_object_or_404(Wishlist, id=posted_data["products"])

        if wished_product.products.filter(id=request.user.id).exists():
            wished_product.products.remove(request.user)
            print("removed")
            return JsonResponse({"remove": "The product is removed"})
        else:
            wished_product.products.add(request.user)
            print("Added")
            return JsonResponse({"added": "The product was added to your wishlist"})

From the template:

<div class="yith-wcwl-add-to-wishlist">
                                        <div class="yith-wcwl-add-button show">
                                            <a href="{% url 'mainapp:addtowishlist' %}"><div class="add_to_wishlist" data-single-product-id = "{{ product.id }}"></div></a>
                                        </div>
                                    </div>

Model:

class Wishlist(models.Model):
    customuser = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
    products = models.ForeignKey(Product, on_delete=models.CASCADE)

    def __str__(self):
        return self.products.product_name

Generally speaking, you encounter this situation with an invalid URL creating a 404 or 500 response. Check the log on the server to see what the response is for that request.

Hello Mr. Ken!

The server log is:

It’s a POST request with a 200 HTTP response code.

Can you see the ajax request from the network tab?

What is the response it’s showing?