Question

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

这是处理表单提交并向服务器发送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
      });
    }
  });
}

当我点击Login时，我会在控制台中记录我的值，如下所示 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

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

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

希望它有所帮助。

Answer 2

尝试这个ajax请求添加JQuery脚本，我运行你的服务器，问题是请求而不是服务器，我不是很好的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

请求将作为multipart / form-data发送到服务器。 body-parser不支持multipart / form-data。如果确实要求POST请求采用这种格式，那么请查看multer或强大的内容。

即使在使用正文解析中间件时获取空请求正文

3 个答案: