Как отправить данные формы на сервер с помощью JavaScript - PullRequest
0 голосов
/ 03 февраля 2019

Я работаю с двумя серверами, один для React (по адресу http://localhost:3000/contact) и другой для Express (по адресу http://localhost:5000/).Я хочу отправить объект данных формы с помощью некоторого подхода HTTP-запроса в качестве метода POST, но я получаю пустой объект на стороне "бэкэнда".

У меня есть простая форма с событием onSubmit, которое сначала создает объектсо значениями данных формы:

const data = {
    firstInput: evt.target.elements.firstInput.value,
    secondInput: evt.target.elements.secondInput.value
}

Примечание: Я протестировал Если получить все данные до тех пор, пока здесь, с инструментами DevTools и React Dev, пока здесь это прекрасно работает.

И второй сервер с Express, который просто имеет простую конечную точку, которая должна получать эти данные или, по крайней мере, печатать то, что я отправил в объекте req.body:

server.post("/", (req, res) => {
    res.end(req.body);
});

Примечание 2: Также проверил эту конечную точку, и она работает нормально, но req.body получает пустой объект.

Я протестировал несколько методов, таких как:

Собственный fetch API:

fetch("http://localhost:5000/", {
    method: "POST",
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
    }).then(res => {
        console.log(res);
    });

Ошибка :

Error

Также, пробовал с async / await заходом на fetch API но я не был уверен в использовании его в компоненте React.

Я также пытался http API , но получилс тем же.

Я думаю, мой первый вопрос - как отправить правильно отформатированные данные со стороны компонента на сторону сервера.В любом случае, спасибо.

1 Ответ

0 голосов
/ 03 февраля 2019

Используйте этот пакет Строка запроса Вы можете использовать так:

import queryString from 'query-string';
fetch('url here', {
    method: 'POST',
    headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important
    body: queryString.stringify({for:'bar', blah:1}
});
...