React使用Axios发送POST请求后Express后端无法接收数据如何解决？

Express 4.16.0及之后的版本内置了请求体解析中间件，但默认没有启用。你通过Axios发送的是JSON格式的POST请求，不启用解析中间件的话req.body会是undefined，直接打印整个req对象自然找不到对应的数据。

步骤1：配置Express请求体解析中间件 #

在你的Express项目入口文件（通常为app.js、index.js）中，注册路由的代码之前，添加以下配置：

// 解析JSON格式的请求体，适配Axios默认发送的application/json格式数据
app.use(express.json())
// 如果后续需要接收表单格式的提交数据，可以额外添加这行配置
app.use(express.urlencoded({ extended: true }))

步骤2：修改接口逻辑读取请求数据 #

你可以直接通过req.body拿到前端传输的data数据，修改后的接口代码参考：

app.post('/login',(req,res)=>{
    // 此处打印即可看到前端传入的所有数据
    console.log(req.body);
    // 注意必须给前端返回响应，否则Axios会触发超时错误
    res.json({status: 'success', receivedData: req.body})
});

步骤3：跨域配置（可选，高频踩坑点） #

你本地React开发服务和Express后端端口不一致，属于跨域请求，建议配置跨域支持避免后续请求报错：

1. 安装cors依赖：npm install cors
2. 在Express入口文件中引入并启用：

const cors = require('cors')
app.use(cors())

• Axios发送POST请求时默认的Content-Type为application/json，仅配置express.json()中间件即可正常解析数据
• 接口处理逻辑完成后必须调用res.send/res.json/res.end等方法返回响应，否则请求会一直挂起直到超时

内容的提问来源于stack exchange，提问作者user14422045