错误404:无法POST/api/users/register

Question

我正在使用MERN Stack构建一个资金管理器应用程序，我无法将数据发布到数据库中。如果我点击register按钮，它会抛出一个错误，即它无法POST/api/users/register，我还在React的package.json中放置了一个指向服务器的代理，但它仍然不起作用，可以做些什么来修复这个错误？

Register.js

import { Form, message } from "antd";
import Input from "antd/lib/input/Input";
import React from "react";
import { Link } from "react-router-dom";
import "../resources/authentication.css";
import axios from "axios"
function Register() {
const onFinish = async (values) => {
try {
await axios.post('/api/users/register', values)
message.success("Registration Successful")
} catch (error) {
message.error("Something Went Wrong")
}
}
return (
<div className="register">
<div className="row justify-content-center align-items-center w-100 h-100">
<div className="col-md-5">
<div className="lottie">
<lottie-player
src="https://assets5.lottiefiles.com/packages/lf20_t74j51tv.json"
background="transparent"
speed="1"
loop
autoplay
></lottie-player>
</div>
</div>
<div className="col-md-5">
<Form layout="vertical" onFinish={onFinish}>
<h1>Money Manager / Register</h1>
<br/>
<Form.Item label="Name" name="name">
<Input />
</Form.Item>
<Form.Item label="Email" name="email">
<Input />
</Form.Item>
<Form.Item label="Password" name="password">
<Input />
</Form.Item>
<div className="d-flex justify-content-between align-items-center">
<Link to="/login">Already Registered, Click Here To Login</Link>
<button className="primary" type="submit">REGISTER</button>
</div>
</Form>
</div>
</div>
</div>
);
}
export default Register;

usersRoute.js

const express = require("express");
const User = require("../models/User");
const router = express.Router();
router.post("/login", async function (req, res) {
try {
const result = await User.findOne({
email: req.body.email,
password: req.body.password,
});
if (result) {
res.send(result);
} else {
res.status(500).json("Error");
}
} catch (error) {
res.status(500).json(error);
}
});

router.post("/register", async function (req, res) {
try {
const newuser = new User(req.body);
await newuser.save();
res.send('User Registered Successfully')
} catch (error) {
res.status(500).json(error);
}
});

module.exports = router

server.js

const express = require('express')
const dbConnect = require('./DbConnect')
const app = express()
app.use(express.json())
const userRoute = require('./routes/usersRoute')
app.use('./api/users/', userRoute)

const port = 5000
app.listen(port, () => console.log(`Node JS Server started at port ${port}!`))

React's package.json

{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"antd": "^4.23.4",
"aos": "^2.3.4",
"axios": "^1.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"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"
]
}
}

Answer 1

只需删除点即可。更改

app.use('./api/users/', userRoute)

app.use('/api/users/', userRoute)