React前端Axios Post无法连接Node后端，URL正确但无数据提交

1. 确保后端正确解析JSON请求体 #

Postman能正常提交但前端不行，大概率是后端没配置解析JSON请求体的中间件，导致req.body为空。在后端路由代码之前添加以下中间件：

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

// 解析JSON格式的请求体
app.use(express.json());
// 兼容URL编码格式的请求体（可选，适配表单提交场景）
app.use(express.urlencoded({ extended: true }));

2. 处理跨域（CORS）问题 #

React开发服务器默认跑在3000端口，后端在3002端口，浏览器会拦截跨域请求，而Postman不受此限制。

1. 安装CORS依赖：

npm install cors

2. 在后端启用CORS：

const cors = require('cors');
// 开发环境允许所有来源跨域，生产环境可配置指定域名
app.use(cors());

3. 检查前端请求头配置 #

Axios默认会自动设置Content-Type: application/json，如果自定义的headers覆盖了这个设置，会导致后端无法解析请求体。

• 优先移除自定义headers，让Axios自动处理：

const addPerson = () => {
  axios.post('http://localhost:3002/api/create', {
      first: "Kevin",
      last: "Buter",
      phone: "313",
      email: "k@gmail.com",
    })
    .then((response) => {
      console.log(response);
      console.log(response.status);
    })
    .catch((error) => console.log(error));
};

• 若必须自定义headers，确保包含正确的Content-Type：

const headers = {
  'Content-Type': 'application/json',
  // 其他必要的头信息
};

4. 后端路由添加响应反馈 #

当前后端路由没有给前端返回任何响应，可能导致前端请求处于pending状态（即使数据已插入数据库）。在数据库操作回调中补充响应逻辑：

app.post('/api/create', (req, res) => {
  const firsts = req.body.first;
  const lasts = req.body.last;
  const phones = req.body.phone;
  const emails = req.body.email;

  db.query(
    'INSERT INTO users (first, last, email, phone) VALUES (?,?,?,?)',
    [firsts, lasts, emails, phones],
    (err, result) => {
      if (err) {
        console.log(err);
        return res.status(500).json({ error: '创建用户失败' });
      }
      console.log(result);
      res.status(200).json({ message: '用户创建成功' });
    }
  );
});

按以上步骤逐一排查，即可解决前端无法提交数据的问题。

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