向本地主机API端点发出POST请求时出现错误404 Not Found

Question

尝试在 JavaScript 应用程序中向“/api/auth/signup”发出 POST 请求时遇到 404 Not Found 错误。我正在尝试为现代房地产市场构建 MERN 应用程序。 这是我的代码： 注册文件：

   `import { useState } from "react";
     import { Link } from "react-router-dom";
     import loginImg from "../assets/login.png";
     export default function SignUp() {
       const [formData, setFormData] = useState({})
       const handleChange = (e) => {
       setFormData(
          {
            ...formData,
            [e.target.id]: e.target.value,
          }
        );
    
      };
      const handleSubmit = async (e) => {
        e.preventDefault();
        const res = await fetch("/api/auth/signup",
        {
          method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify(formData),
    }
    );
    console.log('Response:', res);
    const data = await res.json();
    console.log(data);

}
console.log(formData);
return (
<div>
<div><img><img</img>`</div>`
<div>

      <form onSubmit={handleSubmit}>
        <h1>SIGN UP</h1>
        <div>
        <input type='text' placeholder='username' id="username" onChange={handleChange}></input>
        </div>
        <div>
        <input type='email' placeholder='email' id="email" onChange={handleChange} ></input>
        </div>
        <div>
        <input type='password' placeholder='password' id="password" onChange={handleChange} ></input>
        </div>
        <div>
          <p><input type='checkbox'></input>Remember me</p>
        </div>
        <button>Sign Up</button>
        <p>Already have an account?</p>
        <button><Link to={"/sign-in"}>Sign In</Link></button>
      </form>
      </div>
    
    </div>

 )}

我的vite.config文件：

import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
server: {
proxy: {
"/api": {
target: "http://localhost:3000",
secure: false,
},
},
},
plugins: \[react()\],
});

我的index.js

import dotenv from "dotenv";
import express from "express";
import mongoose from "mongoose";
import authRouter from "./routes/auth.route.js";
import userRouter from "./routes/user.route.js";
dotenv.config();

mongoose.connect(process.env.MONGO).then( () => {
console.log("Connected to MongoDB!");
}).catch((err) =\> {
console.log(err);
});

const app = express();
app.use(express.json());

app.listen(3000, () => {
console.log("Server is running on port 3000");
}
);

app.use("/api/user", userRouter);
app.use("/api/auth", authRouter);

app.use((err, req, res, next) => {
const statusCode = err.statusCode || 500;
const message = err.message || "Internal Server Error";
return res.status(statusCode).json({
success: false,
statusCode,
message,
});
});

我的身份验证控制器文件：

import bcryptjs from "bcryptjs";
import User from "../models/user.model.js";

export const signup=async (req,res, next) => {

const { username, email, password } = req.body;
const hashedPassword = bcryptjs.hashSync(password, 10);
const newUser = new User({ username, email, password: hashedPassword });
try {
await newUser.save();
res.status(201).json("User created successfully");
} catch (error) {
next(error);
}

};

我的用户模型文件：

import mongoose from "mongoose";

const userSchema = new mongoose.Schema( {
username: {
type: String,
required: true,
unique: true,

    },
    email: {
        type: String,
        required: true,
        unique: true,
    
    },
    password: {
        type: String,
        required: true,
        
    
    },

}, {timestamps: true});

const User = mongoose.model("User", userSchema);

export default User;

任何解决此问题的帮助将不胜感激。谢谢！

我尝试过的：

我已仔细检查该 URL 以确保其正确。 我已经在浏览器的开发人员工具中检查了网络请求，并且请求是按预期发出的。 我手动添加了“http://localhost:3000/api/auth/signup”而不是/api/auth/signup” 我仍然收到错误。任何解决此问题的帮助将不胜感激。谢谢！

控制台中的错误消息：POST http://localhost:5173/api/auth/signup 404 (Not Found)

Answer 1

执行这 2 项检查

1. 仅运行支持的服务器，忘记前端，只需使用 POSTMAN / CURL 测试您的后端 API。
2. 在后端服务器中检查您的方法类型“GET/POST”。