Как выполнить POST-запрос через fetch() на localhost?

Question

[romaro]

Пытаюсь отладить форму. Сервер node на виртуалке, настроен проброс 3000 порта для localhost.
Код для отправки запроса на странице с формой:

<script>
        const elBtnSend = document.querySelector('.cell-btn-send')

        elBtnSend.addEventListener('click', () => {
            elBtnSend.classList.add('js-btn-loader')

            let userInfo = {
                username: document.querySelector('.cell-username input').value,
                email: document.querySelector('.cell-email input').value,
                phone: document.querySelector('.cell-phone input').value
            }

            fetch('localhost:3000/users/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: JSON.stringify(userInfo)
            })
        })
    </script>

На сервере пока тестовый обработчик (хочу только вывести запрос в консоль):

app.post('/users', function (req, res) {
  if (!req.body) return res.sendStatus(400);
  console.log(req.body);
})

Получаю ошибку промиса в консоли браузера:

Answer 1

[Василий Банников]

fetch('localhost:3000/users/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: JSON.stringify(userInfo)
            })

А как fetch должен понять, при помощи какого протокола надо отправлять запрос? Укажите в строке явно - http это или https

Answer 2

[Konfy]

Для отображения JSON нужно сперва пропустить запрос через body-parser middleware
Подробнее тут и тут.

Рабочий пример

index.html

<script>
  fetch('users/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    },
    body: JSON.stringify({ name: 'qwerty', id: 123 })
  })
</script>

app.js

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const jsonParser = bodyParser.json();
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'));
});

app.post('/users', jsonParser, (req, res) => {
  if (!req.body) return res.sendStatus(400);

  console.log(req.body);

  res.end();
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

Comments

[romaro]

Спасибо за подсказку. Я думал, можно вывалить в консоль "сырые" данные. Кстати, бодипарсер уже встроен в экспресс, поэтому его не нужно отдельно устанавливать и подлючать к проекту. Достаточно:
const jsonParser = express.json();

[Konfy]

romaro, а почему ответом на вопрос выбран ответ который вообще неправильный?