reactjs 404 -无法在mongodb数据库中注册我的详细信息

bejyjqdl  于 5个月前  发布在  React
关注(0)|答案(1)|浏览(44)

我收到Axios错误404。无法在mongodb数据库中注册详细信息获取错误-无法加载资源:服务器响应状态为404(未找到)。Error 404 Image也可能是Mongodb连接错误。

  1. Register.js -这是我的前端与axios
const Register = () => {

    const navigate = useNavigate();
    const [loading, setLoading] = useState(false)

    //form submit
    const submitHandler = async (values) => {
        try {
            setLoading(true)
            await axios.post('/users/register', values)
            message.success('Registeration Successfull')
            setLoading(false)
            navigate('/login')
        } catch (error) {
            console.log(error)
            setLoading(false)
            message.error('something went wrong')
        }
        console.log()
    }
    return (
        <>
            <div className='register-page'>
                {loading && <Spinner />}
                <Form layout='vertical' onFinish={submitHandler}>
                    <h1>Register</h1>
                    <Form.Item label="Name" name="name">
                        <Input />
                    </Form.Item>
                    <Form.Item label="Email" name="email">
                        <Input type='email' />
                    </Form.Item>
                    <Form.Item label="Password" name="password">
                        <Input type='password' />
                    </Form.Item>
                    <div className='d-flex'>
                        Already Registered ? Click here to
                        <Link to="/login"> Login</Link>
                        <button type='submit' className='btn btn-primary'>Register</button>
                    </div>
                </Form>
            </div>
        </>
    )

}

export default Register

字符串
2)userRoute.js--这是我使用express router的后端

const express = require('express')

const { loginController, registerController } = require('../controllers/userController')

//router object
const router = express.Router()

//routers
//POST || LOGIN
router.post('/login', loginController)

//POST || REGISTER
router.post('/register', registerController)

module.exports = router;

  1. Server.js -
const express = require('express')
const cors = require('cors')
const morgan = require('morgan')
const dotenv = require('dotenv')
const colors = require('colors')
const connectDb = require('./config/connectDb')
const { createProxyMiddleware } = require('http-proxy-middleware');

//config dot env file
dotenv.config();

//call db
connectDb()

//rest object
const app = express()

//middleware
app.use(morgan('dev'))
app.use(express.json())
app.use(cors())

//routes
/*app.use(
  createProxyMiddleware({
    target: 'http://localhost:8080',
    changeOrigin: true,
  }),
);*/

app.use('/api/v1/users', require('./routes/userRoute'));

//port
const PORT = 8080 || process.env.PORT

//listen server
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})

2w2cym1i

2w2cym1i1#

问题出在你在前端点击的端点上。我希望你已经在axios config中设置了默认的URL。

await axios.post('/register', values)

字符串
这将命中服务器中的/register端点。
您需要设置一个baseURL,它将是您的后端服务器的基本url,前端将在该服务器上工作。
在前端src目录中创建一个axiosConfig.js文件。

//axiosConfig.js
import axios from "axios";

axios.defaults.baseURL = "http://localhost:8080/";// base-url of your backend server

//can also use interceptors if needed in future.

export default axios;


axios docs
axiosaxiosConfig.js导入Register.js

//Register.js

import axios from "./axiosConfig" // path to your axiosConfig file


server.js中的更改:

//server.js

app.use(
  cors({
    origin: "http://localhost:3000",// for specific origin
  })
);

app.use(
  cors({
    origin: "*", // accessible by all origins
  })
);

//routes

const router = require('./routes/userRoute');
app.use(router);


axiosConfigroutes将修复您的问题。

相关问题