localhost POST请求无法连接数据库：/insert路由404问题求助

• 访问localhost:3001/insert时收到提示：Cannot GET /insert，控制台显示GET http://localhost:3001/insert 404 (Not Found)
• 已确认本地数据库与Node/Express连接正常，app.get("/select")路由可正常访问（localhost:3001/select有效），但app.post("/insert")路由无法工作
• 尝试用curl测试该路由未成功，调整fetch的URL也无改善

服务端（registerdb.js，位于server分支） #

const express = require("express");
const mysql = require("mysql2");
const app = express();
const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "DanaRoot5!",
  database: "OurProjectSchema",
});
const bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post("/insert", (req, res) => {
  const body = req.body;
  const sql = `INSERT INTO customer (customer_ID, SSN, address, full_name, date_of_registration) VALUES (?, ?, ?, ?, ?)`;
  const values = [
    body.customer_ID,
    body?.SSN,
    body?.address,
    body?.full_name,
    body?.date_of_registration,
  ];

  db.query(sql, values, (error, results) => {
    if (error) {
      console.log(body);
      console.error("Error executing query: " + error.stack);
      res.status(500).send("Error adding customer");
      return;
    }

    console.log("Query results:", results);
    res.status(200).send("Customer added successfully");
  });
});

app.listen(3001, () => {
  console.log("Server started on port 3001");
});

客户端（Register.jsx，位于client分支） #

import React, { useState } from "react";
const { v4: uuidv4 } = require("uuid");

export const Register = (props) => {
  const [SSN, setSSN] = useState("");
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    const date = new Date().toISOString().slice(0, 19).replace("T", " ");
    const customer_id = uuidv4();

    fetch("http://localhost:3001/insert", {
      mode: "no-cors",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        customer_ID: customer_id,
        SSN: SSN,
        address: address,
        full_name: name,
        date_of_registration: date,
      }),
    })
      .then((response) => {
        console.log(response);
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then((data) => {
        console.log(data);
        // display success message to user
      })
      .catch((error) => {
        console.error(error);
        // display error message to user
      });
  };

  return (
    <div className="auth-form-container">
      <h2>Register</h2>
      <form className="register-form" onSubmit={handleSubmit}>
        <label htmlFor="name">Full Name</label>
        <input
          value={name}
          name="name"
          onChange={(e) => setName(e.target.value)}
          id="name"
          placeholder="Full Name"
        />
        <label htmlFor="SSN">SSN/SIN</label>
        <input
          value={SSN}
          onChange={(e) => setSSN(e.target.value)}
          type="text"
          placeholder="SSN/SIN"
          id="SSN"
          name="SSN"
        />
        <label htmlFor="Address">Address</label>
        <input
          value={address}
          onChange={(e) => setAddress(e.target.value)}
          type="text"
          placeholder="Address"
          id="Address"
          name="Address"
        />
        <button type="submit">Register</button>
      </form>
      <button className="link-btn" onClick={() => props.onFormSwitch("login")}>
        Already have an account? Login here.
      </button>
    </div>
  );
};

• 禁止用浏览器地址栏直接测试POST路由：浏览器地址栏默认发送GET请求，而目标路由是POST类型，因此会返回404。必须使用POST方式测试，比如curl、Postman或客户端表单提交。
• 移除fetch的mode: "no-cors"：该模式会限制浏览器处理跨域请求的能力，导致无法获取响应内容，甚至引发请求行为异常。跨域问题应通过服务端配置解决，而非使用该模式。
• 服务端添加CORS支持：客户端与服务端端口不同（如客户端3000、服务端3001）属于跨域场景，需安装cors包并启用：

  npm install cors
  

  随后在服务端代码中添加：

  const cors = require("cors");
  app.use(cors()); // 放在bodyParser配置之后、路由注册之前
  

• 用curl正确测试POST路由：执行以下命令验证服务端路由是否正常：

  curl -X POST http://localhost:3001/insert \
  -H "Content-Type: application/json" \
  -d '{"customer_ID":"test-uuid-123","SSN":"123456789","address":"123 Test St","full_name":"Test User","date_of_registration":"2024-05-20 10:00:00"}'
  

  若服务端返回Customer added successfully，说明路由本身无问题，故障出在客户端请求环节。
• 检查服务端是否重启：修改服务端代码后必须重启服务器，否则新的路由配置不会生效。
• 验证请求体格式：确保客户端发送的JSON格式无语法错误。可在服务端app.post("/insert")开头添加console.log(req.body)，查看是否能正确接收客户端数据。

内容的提问来源于stack exchange，提问作者Dana Sh.