Express.js POST请求失效无法写入数据库，访问接口报Cannot GET错误

我用Express开发网站的基础POST请求代码，但直接访问localhost:3002/putElement时页面提示cannot GET /putElement。具体情况：

• 采用Axios+NodeJS实现数据库读写交互
• app.get()函数可正常运行，但app.post()无法正常工作

附相关代码：

React代码 #

import Axios from "axios";
export const SubmitItem = () => {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [itemsList, setItemsList] = useState([]);
  const postItem = () => {
    Axios.post("http://localhost:3002/putElement", {
      name: name,
      image: image,
      size: size,
      category: category,
      description: description,
      price: price,
      seller: seller,
    }).then(() => {
      setItemsList([
        itemsList,
        {
          name: name,
          image: image,
          size: size,
          category: category,
          description: description,
          price: price,
          seller: seller,
        },
      ]);
    });
  };
  console.log(itemsList);
  return (
    <div className="submitBody">
      <div className="container bg-white mt-3 mb-3">
        <div className="row">
          <div className="col-sm-2 m-4">
            <div className="mt-2">Item Title:</div>
            <br />
            <div className="mt-2">Description:</div>
          </div>
          <div className="col-sm-1"></div>
          <div className="col-sm-5 mt-2">
            <div className="mt-4">
              <input
                type="text"
                name=""
                id=""
                onChange={(e) => setName(e.target.value)}
              />
            </div>
            <div className="mt-4">
              <input
                type="text"
                name=""
                id=""
                onChange={(e) => setDescription(e.target.value)}
              />
            </div>
          </div>
        </div>
        <div className="mb-4" style={{ width: "50%" }}>
          <button type="submit" className="submitButton" onClick={postItem}>
            Submit
          </button>
        </div>
      </div>
    </div>
  );
};

NodeJS代码 #

const express = require("express");
const mysql = require("mysql");
const app = express();
const cors = require("cors");
app.use(cors());
app.use(express.json());

// Creating connection
let db = mysql.createConnection({
  host: "localhost",
  port: "3325",
  user: "root",
  password: "",
  database: "clothingstore",
});
app.post("/putElement", (req, res) => {
  res.send("works");
  const name = req.body.name;
  const description = req.body.description;
  const sql = `INSERT INTO shirt ( 'name', 'description') VALUES (?, ?)`;
  db.query(sql, [name, description], (err, result) => {
    res.send(result);
  });
});
app.listen(3002, () => {});

1. 浏览器直接访问POST接口的错误 #

浏览器地址栏发起的是GET请求，但你的接口仅注册了app.post("/putElement")，因此会返回cannot GET /putElement。POST接口不能通过浏览器地址栏直接访问，必须通过POST请求触发（比如React页面的按钮点击事件）。

2. NodeJS接口的响应重复发送问题 #

你的POST接口中调用了两次res.send()：

res.send("works"); // 第一次发送响应后，连接已关闭
// ... 后续代码
res.send(result); // 再次发送会触发错误

HTTP响应只能发送一次，第一次res.send()执行后，请求连接已关闭，后续数据库操作和响应都会失效。

3. SQL语句语法错误 #

SQL字段名不能用单引号包裹，需使用反引号（`）或直接写字段名：

-- 错误写法
INSERT INTO shirt ( 'name', 'description') VALUES (?, ?)
-- 正确写法
INSERT INTO shirt (`name`, `description`) VALUES (?, ?)

4. React代码的未定义变量问题 #

Axios请求中用到的image、size、category、price、seller未声明对应的useState，会导致报错，请求无法正常发送。

React代码 #

import Axios from "axios";
import { useState } from "react";

export const SubmitItem = () => {
  // 补全所有需要的状态变量
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [image, setImage] = useState("");
  const [size, setSize] = useState("");
  const [category, setCategory] = useState("");
  const [price, setPrice] = useState("");
  const [seller, setSeller] = useState("");
  const [itemsList, setItemsList] = useState([]);

  const postItem = () => {
    Axios.post("http://localhost:3002/putElement", {
      name,
      image,
      size,
      category,
      description,
      price,
      seller,
    }).then((response) => {
      // 用接口返回的有效数据更新列表
      setItemsList([...itemsList, response.data]);
    }).catch(err => {
      // 添加错误捕获便于调试
      console.error("请求失败:", err);
    });
  };

  console.log(itemsList);
  return (
    <div className="submitBody">
      <div className="container bg-white mt-3 mb-3">
        <div className="row">
          <div className="col-sm-2 m-4">
            <div className="mt-2">Item Title:</div>
            <div className="mt-4">Description:</div>
            <div className="mt-4">Image URL:</div>
            <div className="mt-4">Size:</div>
            <div className="mt-4">Category:</div>
            <div className="mt-4">Price:</div>
            <div className="mt-4">Seller:</div>
          </div>
          <div className="col-sm-1"></div>
          <div className="col-sm-5 mt-2">
            <div className="mt-4">
              <input
                type="text"
                onChange={(e) => setName(e.target.value)}
                placeholder="Item Title"
              />
            </div>
            <div className="mt-4">
              <input
                type="text"
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Description"
              />
            </div>
            <div className="mt-4">
              <input
                type="text"
                onChange={(e) => setImage(e.target.value)}
                placeholder="Image URL"
              />
            </div>
            <div className="mt-4">
              <input
                type="text"
                onChange={(e) => setSize(e.target.value)}
                placeholder="Size"
              />
            </div>
            <div className="mt-4">
              <input
                type="text"
                onChange={(e) => setCategory(e.target.value)}
                placeholder="Category"
              />
            </div>
            <div className="mt-4">
              <input
                type="number"
                onChange={(e) => setPrice(e.target.value)}
                placeholder="Price"
              />
            </div>
            <div className="mt-4">
              <input
                type="text"
                onChange={(e) => setSeller(e.target.value)}
                placeholder="Seller"
              />
            </div>
          </div>
        </div>
        <div className="mb-4" style={{ width: "50%" }}>
          <button type="button" className="submitButton" onClick={postItem}>
            Submit
          </button>
        </div>
      </div>
    </div>
  );
};

NodeJS代码 #

const express = require("express");
const mysql = require("mysql");
const app = express();
const cors = require("cors");

app.use(cors());
app.use(express.json());

// 创建并测试数据库连接
let db = mysql.createConnection({
  host: "localhost",
  port: "3325",
  user: "root",
  password: "",
  database: "clothingstore",
});

db.connect((err) => {
  if (err) {
    console.error("数据库连接失败:", err);
    return;
  }
  console.log("数据库连接成功");
});

app.post("/putElement", (req, res) => {
  const { name, description } = req.body;
  // 修正SQL字段引号问题
  const sql = `INSERT INTO shirt (\`name\`, \`description\`) VALUES (?, ?)`;
  
  db.query(sql, [name, description], (err, result) => {
    if (err) {
      console.error("数据库操作失败:", err);
      return res.status(500).json({ error: "插入数据失败" });
    }
    // 返回插入后的完整数据（包含自增ID）
    res.status(201).json({
      id: result.insertId,
      name,
      description
    });
  });
});

app.listen(3002, () => {
  console.log("服务器运行在 http://localhost:3002");
});

1. 启动NodeJS服务器，确认控制台输出"数据库连接成功"和"服务器运行在http://localhost:3002"
2. 运行React项目，填写表单后点击Submit按钮
3. 查看浏览器控制台的网络请求状态，同时检查数据库是否新增了对应数据

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