Проблема с простым xmlhttprequest с отправкой данных в expressjs

Question

• Использование nodejs, xmlhttprequest для простой публикации данных формы.

• Использование конструктора formdata () для получения значений из html. Но в

• expressjs тело запроса не получает должным образом. Выдает ошибку
  ниже. Что может быть проблемой при публикации данных с помощью кода
  ниже.

Html:

> <form id='loginForm'>
>       <div>
>         <label>Username:</label>
>         <input type="text" name="title" />
>         <br/>
>       </div>
>       <div>
>         <label>Password:</label>
>         <input type="password" name="descr" />
>       </div>
>       <div>
>         <input type="submit" value="Submit" />
>       </div>
>     </form>

Скрипты :

window.onload = function () {
var testForm = document.getElementById('loginForm');
testForm.onsubmit = function(event) {
    event.preventDefault();
    const XHR = new XMLHttpRequest();
    var formData = new FormData(testForm);
    XHR.open( "POST", "http://localhost:5000/addCat", true);
    XHR.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    XHR.send(formData);
}
}

Но в expressjs вызов :

const addCategories = (request, response) => {
  const { title, descr } = request.body
  console.log(request.body);

// output: { '------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name': '"title"\r\n\r\nsdsf\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="descr"\r\n\r\nsdfdsfds\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="title"\r\n\r\nnewtitle\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="descr"\r\n\r\ngoind descriptions\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7--\r\n' }


  client.query('INSERT INTO categoryLists (title, descr) VALUES ($1, $2)', [title, descr], (error, results) => {
    if (error) {
      throw error
    }
    response.status(201).send(`User added with ID: ${results.insertId}`)
  })
};

Ошибка получения: ошибка: Нулевое значение в столбце «заголовок» нарушает ненулевое ограничение

Answer 1

Вы сказали:

XHR.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

… но объекты FormData генерируют запросы в формате нескольких частей, а не в формате urlencoded.

Удалите эту строку. Пусть XHR сгенерирует свой собственный заголовок Content-Type из объекта FormData.

---

Вам также необходимо убедиться, что в вашем коде Express. js имеется анализатор тела, способный обрабатывать составные данные.