Express Js 无法从 React Js 检索提交的表单数据答案

【问题标题】：Express Js is unable to retrieve submitted form data from React JsExpress Js 无法从 React Js 检索提交的表单数据
【发布时间】：2020-10-15 13:25:43
【问题描述】：

我正在尝试将 React Js 中的帖子数据提交到 Express，但没有数据传递给 body。

来自 React 的 App.js

function submitForm(){
    axios({
        url: 'http://localhost:9000/api/submit-student',
        method: 'POST',
        body: {name: 'John Doe'}
    })
    .then(() => {
        console.log('Data has been saved.')
    })
    .catch(() => {
        console.log('Internal server error')
    })
}

api.js

const express = require("express");
const router = express.Router();

router.post("/submit-student", function (req, res) {
    res.send(req.body)
    console.log(res)
});

module.exports = router;

我在body 中设置了一个测试数据，它将传递给读取端口9000 的api.js。提交很好。唯一的问题是，req.body 返回一个空的 json 数组 {}。它读取 Data has been saved. 消息，但 console.log(res) 在正文部分显示空数组。

提交时没有出现错误。我什至尝试过邮递员，它可以检索帖子数据。

编辑

我的server.js 文件中包含bodyParser。

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();

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

const port = process.env.PORT || 9000;
const routes = require("./routes/api");

mongoose.connect("mongodb-url-here", { 
    useNewUrlParser: true 
})

mongoose.connection.on('connected', ()=>{
    console.log('Mongoose is connected!');
})

app.use('/api', routes);
app.listen(port, () => console.log(`Server up and running on port ${port} !`));

【问题讨论】：

标签： node.js reactjs express axios

【解决方案1】：

将body 选项更改为data 用于axios。请参阅docs 了解如何发送 POST 请求。

api.js:

const express = require('express');
const router = express.Router();

router.post('/submit-student', function(req, res) {
  console.log(req.body);
  res.send(req.body);
});

module.exports = router;

server.js:

const express = require('express');
const cors = require('cors');
const api = require('./api');

const app = express();
const port = 9000;

app.use(cors());
app.use(express.json());
app.use('/api', api);

app.listen(port, () => console.log('server start'));

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
  axios({
    url: 'http://localhost:9000/api/submit-student',
    method: 'POST',
    data: { name: 'John Doe' }
  })
    .then(() => {
      console.log('Data has been saved.');
    })
    .catch(() => {
      console.log('Internal server error');
    });

  </script>
</body>
</html>

服务器日志：

server start
{ name: 'John Doe' }

【讨论】：

你是对的！这是因为body。我切换到data，它现在正在工作。非常感谢！

【解决方案2】：

解决方案 1：

你需要中间件“body parser”

将此添加到您的 app.js 或 server.js 文件（服务器端）

var bodyParser = require('body-parser')
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

解决方案 2： （反应面）

function submitForm(){
    axios({
        url: 'http://localhost:9000/api/submit-student',
        method: 'POST',
        body: JSON.stringify({name: 'John Doe'}), // body must be raw ( as a plain string should do it )
        headers: { 'Content-Type': 'Application/json'} // need the type of the content that is being send
    })
    .then(() => {
        console.log('Data has been saved.')
    })
    .catch(() => {
        console.log('Internal server error')
    })
}

在 axios 中，您发送到服务器的正文应该是原始的，并且调用包含标头 { 'Content-Type': 'Application/json'}

【讨论】：

我的 server.js 中有这个解析器
尝试解决方案2。我认为它需要一个原始数据进入正文
试过了，不幸的是还是一样:(
axios调用的响应是什么？是404吗？还有console.log(req)，应该在res.send(req.body)之前
返回 200。