如何使用 JavaScript 将表单数据发送到服务器

Question

我正在使用两台服务器，一台用于 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 开发工具获取所有数据，直到这里，它工作得很好。

第二个使用 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);
    });

错误：

另外，在fetch API 上尝试使用async / await 方法，但我不确定在 React 组件上使用它。

我也尝试过http API，但我得到了同样的结果。

我想我的第一个问题是如何将格式正确的数据从组件端发送到服务器端。还是谢谢。

Answer 1

使用这个包query-string 你可以这样使用：

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}
});