Почему async fetch не отрабатывает корректно?

Question

[Александр Амплеев]

Есть сервер на go на localhost:8080

На фронте на локалхосте при нажатии на чекбокс вот такой JS отрабатывает

window.onload = async () => {
            let checkBoxes = document.querySelectorAll('input')
            for (checkBox of checkBoxes) {
                checkBox.onclick = async function () {
                    let taskID = this.getAttribute('task-id')
                    let taskCompleted = this.checked

                    let resp = await fetch(`${taskID}/${taskCompleted}`, {
                        method: "POST",
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        }
                    })
                    let data = await resp.json()
                    console.log(data)
                    window.location.reload()
                }
            }
        }

При возникновении события onclick, в консоле отображается ошибка:


Может кто-то подсказать в чем проблема?
Гугление дало, что нужно добавить заголовок Content-type, но это не помогает.. Изначально без заголовков делал запрос..

Comments

[Егор Живагин]

А что у вас приходит в resp ?

[drawnofmymind]

'Content-Type': 'application/json', может так?

Answer 1

[Sun_Day]

Как и сказали выше, с сервера приходит кусок чистого html. Консоль ругается на начало этого html "<", т.е на открывающийся тег.
На результат повесьте либо JSON.stringify(чтобы преобразовать в строку), либо outerHTML(преобразовать в сериализованный HTML-фрагмент), чтобы иметь возможность работать с пришедшими данными. Либо исправляйте на сервере.

Answer 2

[Алексей Уколов]

Сервер в ответ на запрос отдаёт HTML, а не JSON. Соответственно, браузер не может распарсить его в resp.json()
Посмотрите в Network что приходит с сервера и сами убедитесь.