时间戳

首页 > 解决方案 > Express Js 无法从 React Js 检索提交的表单数据

node.js - Express Js 无法从 React Js 检索提交的表单数据

问题描述

我正在尝试将 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，它将被传递给api.js那个读取端口9000。提交很好。唯一的问题是，req.body返回的是一个空的 json 数组{}。它读取Data has been saved.消息，但console.log(res)在正文部分显示空数组。

在此处输入图像描述

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

编辑

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

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.jsreactjsexpressaxios

解决方案

body将选项更改为datafor axios。请参阅有关如何发送 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' }

推荐阅读