@romaro

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

Пытаюсь отладить форму. Сервер 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);
})


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

6073865960bdb977055012.jpeg
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
@vabka
Токсичный
fetch('localhost:3000/users/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: JSON.stringify(userInfo)
            })

А как fetch должен понять, при помощи какого протокола надо отправлять запрос? Укажите в строке явно - http это или https
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Konf
Редактирую ответы на 2 + 2 по 4 раза
Для отображения 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}`);
});


607399ab27689738726389.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы