如何使用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 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);
    });

     

错误 ：

     

也尝试在async上使用await / fetch API方法，但是我不确定在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}
});