使用Axios提交表单数据时遇404错误及TypeError问题求助

问题详情 #

尝试通过Axios将React表单数据提交到MySQL数据库时持续出现404错误，多种调试后仍未解决。使用Fetch可以正常从同一数据库读取数据，但提交操作同样失败。相关代码及报错信息如下：

前端React代码 #

import axios from "axios";
import React, { useState } from "react";
const instance = axios.create();
export default function AddUser() {

  const [user, setUser] = useState({
    id: "",
    name: "",
    username: "",
    email: "",
  });

  const { name, username, email, id } = user;

  const onInputChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    return instance.post("http://127.0.0.1:8081/felice", user);
  };

  return (

    <form onSubmit={(e) => onSubmit(e)}>
      <label htmlFor="ID">
        ID
      </label>
      <input
        type="text"
        name="id"
        value={id}
        onChange={(e) => onInputChange(e)}
      />
      <label htmlFor="Name">
        Name
      </label>
      <input
        type="text"
        name="name"
        value={name}
        onChange={(e) => onInputChange(e)}
      />
      <label htmlFor="Username">
        Username
      </label>
      <input
        type="text"
        name="username"
        value={username}
        onChange={(e) => onInputChange(e)}
      />
      <label htmlFor="Email">
        E-mail
      </label>
      <input
        type="text"
        name="email"
        value={email}
        onChange={(e) => onInputChange(e)}
      />
      <button type="submit">
        Submit
      </button>
    </form>
  );
}

后端Express代码 #

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');

const app = express()
app.use(cors())

const db = mysql.createConnection({
    host: "127.0.0.1",
    user: "root",
    password: "",
    database: "felice"
})

app.get('/felice', (re, res)=> {
    const sql = "SELECT * FROM reservations";
    db.query(sql, (err, data)=> {
        if(err) return res.json(err);
        return res.json(data);
    })
})

app.listen(8081, () => {
    console.log("working");
})

报错信息 #

TypeError: Cannot read properties of undefined (reading 'id')
    at C:\Users\Utku\Desktop\reservation-software-felice\backend\server.js:24:21
    at Layer.handle [as handle_request] (C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle [as handle_request] (C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\express\lib\router\index.js:284:15 
    at Function.process_params (C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\express\lib\router\index.js:280:10)
    at cors (C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\cors\lib\index.js:188:7)     
    at C:\Users\Utku\Desktop\reservation-software-felice\backend\node_modules\cors\lib\index.js:224:17

解决方案 #

1. 核心问题分析 #

• 404错误原因：后端仅实现了GET /felice接口，没有处理POST请求的路由，导致提交时找不到对应接口。
• TypeError原因：报错显示无法读取undefined的id，大概率是尝试添加POST路由时，既没配置Express解析JSON请求体的中间件，又可能把请求对象req误写成了re（如现有GET路由中的参数错误）。

2. 后端代码修复 #

步骤1：添加JSON请求体解析中间件

Express默认不会解析JSON格式的请求体，必须添加以下中间件才能获取前端提交的user数据：

// 在app.use(cors())之后添加
app.use(express.json());

步骤2：实现POST路由处理数据插入

// 定义POST接口处理表单提交
app.post('/felice', (req, res) => {
  // 从请求体中获取提交的数据
  const { id, name, username, email } = req.body;
  // 编写插入SQL语句（使用占位符防止SQL注入）
  const insertSql = "INSERT INTO reservations (id, name, username, email) VALUES (?, ?, ?, ?)";
  // 执行数据库插入操作
  db.query(insertSql, [id, name, username, email], (err, result) => {
    if (err) {
      console.error("插入失败", err);
      return res.status(500).json({ error: "数据插入失败", details: err });
    }
    return res.status(200).json({ message: "数据提交成功", insertId: result.insertId });
  });
});

步骤3：修正GET路由的参数错误

将现有GET路由中的参数re改为规范的req（不影响功能，但符合编码规范）：

app.get('/felice', (req, res)=> {
    const sql = "SELECT * FROM reservations";
    db.query(sql, (err, data)=> {
        if(err) return res.json(err);
        return res.json(data);
    })
})

3. 前端代码优化（可选但推荐） #

• 给Axios实例设置baseURL简化请求路径
• 添加错误捕获逻辑，方便调试提交失败的原因

import axios from "axios";
import React, { useState } from "react";

// 设置baseURL，后续请求无需重复写域名
const instance = axios.create({
  baseURL: "http://127.0.0.1:8081"
});

export default function AddUser() {
  const [user, setUser] = useState({
    id: "",
    name: "",
    username: "",
    email: "",
  });

  const { name, username, email, id } = user;

  const onInputChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await instance.post("/felice", user);
      console.log("提交成功", response.data);
      // 提交成功后重置表单
      setUser({ id: "", name: "", username: "", email: "" });
    } catch (error) {
      // 打印详细错误信息便于调试
      console.error("提交失败", error.response?.data || error.message);
    }
  };

  // 表单部分保持不变
  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="ID">ID</label>
      <input
        type="text"
        name="id"
        value={id}
        onChange={onInputChange}
      />
      <label htmlFor="Name">Name</label>
      <input
        type="text"
        name="name"
        value={name}
        onChange={onInputChange}
      />
      <label htmlFor="Username">Username</label>
      <input
        type="text"
        name="username"
        value={username}
        onChange={onInputChange}
      />
      <label htmlFor="Email">E-mail</label>
      <input
        type="text"
        name="email"
        value={email}
        onChange={onInputChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

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