React+Express中Axios Post请求异常问题排查求助

咱们来一步步拆解你遇到的问题，其实是三个核心细节没处理到位：

1. 表单默认提交行为未被及时阻止 #

你的handleSubmit里把event.preventDefault()放在了Axios请求之后——这会导致浏览器先执行表单的默认跳转行为，Axios的异步请求还没完成就被中断了，自然看不到"Dog"的打印。必须把阻止默认行为的代码放在函数最开头。

修正后的handleSubmit代码：

handleSubmit(event) {
  // 先阻止表单默认跳转！
  event.preventDefault();
  axios.post('/api/newBlog', { title: this.state.title })
    .then(res => console.log("Dog"))
    .catch(err => console.error('请求出错:', err)); // 建议加catch捕获错误，方便排查
}

2. Axios请求的数据格式不对 #

你直接传递this.state.title作为POST数据，但后端期望的是req.body对象里的字段，所以需要把数据包装成键值对的对象传递，而不是单纯的字符串。

3. Express未配置请求体解析中间件 #

Express默认不会自动解析JSON格式的请求体，这就是req.body为undefined的根本原因。你需要在路由定义前添加解析中间件：

修正后的Express代码：

const express = require('express');
const app = express();

// 先添加JSON解析中间件，处理Axios发送的JSON数据
app.use(express.json());
// 如果有传统表单提交场景，可额外添加urlencoded解析
app.use(express.urlencoded({ extended: true }));

app.post('/api/newBlog', (req, res) => {
  console.log(req.body); // 现在能拿到{ title: "用户输入的内容" }了
  // 别忘了给前端返回响应，避免请求一直处于pending状态
  res.status(200).json({ message: '标题已接收' });
});

按上面的调整后，应该就能正常触发Axios请求、后端也能正确获取到提交的数据了。

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