React、NodeJs、MySQL：请求失败，状态码为 404'，名称：'AxiosError'

我想使用 axios 将我的注册信息从我的客户端发送到我的 api。在此过程中发生以下错误：

我已经尝试了不同的选项来修复此错误，但仍然没有任何效果。我试图将 localhost 更改为 127.0.0.1 或在 axios.post 方法中输入完整的 url。但是后来我得到了一个 CORS 错误，我也无法修复。我的数据库在默认端口 3306 上运行，我的反应客户端在 3000 上运行。我在 package.json 中放置了一个代理，我认为这不起作用。你对我有什么解决办法吗？也可以向我解释一下吗？我想提高我的技能；）

客户端注册.jsx

import React, { useState } from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios';


const Register = () => {
  const [inputs, setInputs] = useState({
    username:"",
    email:"",
    passwort:"",
  })

  const handleChange = (e) => {
    setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post("/auth/register", {inputs});
      console.log(res);
  
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className='auth'>
        <h1>Registrieren</h1>
        <form>
            <input required type='benutzername' placeholder='Benutzername' name='benutzername' onChange={handleChange}></input>
            <input required type='email' placeholder='E-Mail' name='email' onChange={handleChange}></input>
            <input required type='passwort' placeholder='Passwort' name='passwort' onChange={handleChange}></input>
            <button onClick={handleSubmit}>Registrieren</button>
            <p>Ein Problem ist aufgetreten!</p>
            <span>Sie haben bereits ein Konto? <Link to="/login">Login</Link></span>
        </form>
    </div>
  );
}

客户端包.json：

{
  "name": "booking",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "sass": "^1.62.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://127.0.0.1:8800/api/"
}

api db.js

import mysql from "mysql";

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

api 索引.js

const app = express()

app.use(express.json())
app.use("/api/auth", authRoutes)
app.use("/api/users", userRoutes)
app.use("/api/posts", postRoutes)

app.listen(8800, () => {
    console.log("connected!")
})

api 控制器 auth.js

import {db} from "../db.js"
import bcrypt from "bcryptjs"

export const register = (req, res) =>{

//Check existing user
const q = "SELECT * FROM users WHERE email = ? OR benutzername = ?"

db.query(q, [req.body.email, req.body.name], (err, data) => {
    if(err) return res.json(err);
    if(data.length) return res.status(409).json("User already exists!");

    // Hash to password and create user
    const salt = bcrypt.genSaltSync(10);
    const hash = bcrypt.hashSync(req.body.password, salt);

    const q = "INSERT INTO users(`benutzername`,`email`,`passwort`) VALUES (?)"
    const values = [
        req.body.username,
        req.body.email,
        hash,
    ]

    db.query(q, [values], (err, data) =>{
        if(err) return res.json(err);
        return res.status(200).json("User has been created.");
    })
})

   }

api 路由 auth.js

const router = express.Router()

router.post("/register",register);
router.post("/login",login);
router.post("/logout",logout);

export default router