Как послать и получить данные формы с использованием Pug и JavaScript

Оффтоп javascript
1

Здравствуйте! Я создал форму для входа в систему на Pug:

extends layout

block content
    form(id="login-form")
        input(type="text", name="email", value="", placeholder="Ваш email")
        br
        input(type="password", name="password", value="", placeholder="Ваш пароль")
        br
        input(type="submit" value="Войти")

И я пытаюсь обработать её с помощью следующего скрипта:

script.
    const loginForm = document.querySelector('#login-form');

    loginForm.addEventListener('submit', function(event) {
        const formData = new FormData(loginForm);
        console.log('Содержимое формы: ', formData);
        event.preventDefault();
        fetch('/signin', {
            method: 'POST',
            body: formData
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            localStorage.setItem('token', data.token);
        });
    });

У меня возникает проблема, что на сервере в req.body получается пустой объект. Кто-нибудь знает, как это исправить? Спасибо за любую помощь!

2

FormData нужно конвертировать в объект. Добавь headers: {'Content-Type': 'application/x-www-form-urlencoded'} в fetch или используй new URLSearchParams(new FormData(loginForm)). Можешь также собрать данные через formData.entries() и создать обычный объект.

3

У тебя сервер не может обработать FormData. Поставь multer для multipart данных. Или проще - собери данные через formData.get(‘email’) и отправь как JSON с Content-Type: application/json. У меня так работало без проблем. И проверь body-parser на сервере.

4

Подключил body-parser? Без него req.body всегда пустой. Добавь app.use(express.urlencoded({ extended: true })) перед роутами. На Express работаешь? Может еще что-то настроить надо?