即使使用主體解析中間件，也獲取空的請求主體

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/
    =====
  `)
})

如您所見，我確實在使用主體解析器中間件來解析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)
});

此處的更多信息： 獲取發布JSON數據

編輯

我認為您還必須使用json數據配置bodyParser，如下所示：

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

希望能幫助到你。

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

該請求將作為multipart / form-data發送到服務器。 正文解析器不支持multipart / form-data。 如果確實要求POST請求采用這種格式，那么請看一下multer或功能強大。