尝试在 React 应用程序中注册新用户时出现“404 错误” - 路由或端口问题？

Question

Stack Overflow 社区您好，

我在尝试在 React-Express 应用程序中注册新用户时遇到“404（未找到）”错误。我怀疑这可能与路由问题或我的 Express 服务器配置问题有关。我对 React 和 Express 比较陌生，所以错误可能很简单，我忽略了。

这是我的应用程序中的相关代码：

//Register.jsx
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import Axios from 'axios';

const Register = () => {
  const [email, setEmail] = React.useState('');
  const [userName, setUserName] = React.useState('');
  const [password, setPassword] = React.useState('');
  const navigateTo = useNavigate();

  const createUser = (e) => {
    e.preventDefault();

    Axios.post("http://localhost:5000/user/register", {
      Email: email,
      UserName: userName,
      Password: password,
    })
      .then(() => {
        console.log("User has been created!");
        navigateTo("/login");

        setEmail("");
        setUserName("");
        setPassword("");
      })
      .catch((error) => {
        if (error.response) {
          console.log(error.response.data);
          console.log("Server answered with an error");
        } else if (error.request) {
          console.log("Network error");
        } else {
          console.log("Unexpected error:", error.message);
        }
      });
  };

  return (
    <>
      {/* Your JSX code here */}
    </>
  );
};

export default Register;


//server.js
const express = require("express");
const cors = require("cors");
const port = process.env.PORT || 5000;
const app = express();
const userRoutes = require("./controllers/userController.js");

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

app.use('/user', userRoutes); // Updated route path to '/user'

app.listen(port, () => {
  console.log("Server online" + port);
});


//userController.js
const express = require("express");
const router = express.Router();
const bcrypt = require("bcryptjs");
const db = require("../dataBase/dbConnection");

router.post("/register", async function (req, res) {
  const { Email, UserName, Password } = req.body;

  try {
    const hashedPassword = await bcrypt.hash(Password, 10);

    const SQL = 'INSERT INTO Users (email, username, password) VALUES (?, ?, ?)';
    const values = [Email, UserName, hashedPassword];

    await db.query(SQL, values);

    console.log('User inserted successfully!');
    res.send({ message: 'User added!' });
  } catch (error) {
    console.error("Register Error:", error);
    res.status(500).send({ error: "Register error" });
  }
});

// More code here as needed

尽管检查了代码并进行了一些调整，但在尝试通过我的 React 应用程序注册用户时，我仍然遇到“404（未找到）”错误。我相信这个问题可能与我的路由配置或我的 Express 服务器处理请求的方式有关。

如果有人可以提供解决此问题的见解或解决方案，我将不胜感激。我渴望在 React 和 Express 之旅中学习并克服这一挑战。

感谢您的协助！

Answer 1

1. 检查 .env 中的端口 2）尝试向Postman提出请求