即使使用正文解析中间件也得到一个空的请求正文

Question

我正在尝试实现我的这个小登录系统，并且我有一个表单可以向我的 webpack 开发服务器发送一个发布请求，而后者又将请求代理到我的服务器。

这是处理表单提交并向服务器发送 POST 请求的函数。

handleSubmit = (e) => {
  e.preventDefault();
  this.props.form.validateFields((err, values) => {
    if (!err) {
      console.log('Received values of form: ', values);
      fetch('/login', {
        method: 'POST',
        body: values
      });
    }
  });
}

当我单击登录时，我确实会在控制台中记录我的值，如下所示 http://prntscr.com/hsbpyp

这是处理登录端点的服务器端代码

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));

app.post('/login', (req, res) => {
  console.log('Got user information: \n', req.body);
  res.send('asd');
})

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));

app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));



app.listen(3001, () => {
  console.log(`
    =====
    Server running at http://localhost:3001/
    GraphiQL running at http://localhost:3001/graphiql/
    =====
  `)
})

如您所见，我确实使用 body-parser 中间件来解析 req.body 但是当我尝试记录正文时，我得到一个空对象 http://prntscr.com/hsbqrd

有人可以帮我弄清楚我的代码发生了什么吗？

Answer 1

请求作为 multipart/form-data 发送到服务器。 body-parser 不支持 multipart/form-data。如果您确实需要这种格式的 POST 请求，请查看 multer 或 formidable。

Answer 2

通过添加 JQuery 脚本尝试这个 ajax 请求，我运行了你的服务器，问题是请求不是服务器，我对 HTML 请求不太擅长我什至尝试了 MDN 示例，但它们不起作用，这段代码与您的服务器配合得很好：

$.post("/login",
{
    name: "name",
    pass: "password"
},
function(data, status){
    console.log(data)
    console.log(status)
});

这是你需要的脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 3

也许在您的客户端，您应该尝试使用这种方法？

var values = {
    username: 'test',
    password: 'test'
};

fetch("/login", {
   method: "POST",
   headers: {
     'Accept': 'application/json, text/plain, */*',
     'Content-Type': 'application/json'
   },
   body: JSON.stringify(values)
});

更多信息在这里：Fetch Post JSON data

编辑

我认为您还必须使用这样的 json 数据配置 bodyParser：

app.use(bodyParser.json({limit: '200mb'}));

希望对你有帮助。