在从事 MERN 项目时,当我尝试从表单的寄存器页面获取数据时,我遇到了一个问题,Axios 给出了错误。我正在尝试将数据发送到数据库,但我陷入了这个问题。我尝试刷新我的 app.js 文件,但仍然无法确定原因。
import "./register.scss";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
import { useState } from "react";
import apiRequest from "../../lib/apiRequest";
function Register() {
const [error, setError] = useState("")
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const username = formData.get("username");
const email = formData.get("email");
const password = formData.get("password");
try {
const res = await axios.post("http://localhost:5000/api/auth/register", {
username, email, password
})
console.log(res.data);
} catch (error) {
console.log(error);
// setError()
}
}
return (
<div className="registerPage">
<div className="formContainer">
<form onSubmit={handleSubmit}>
<h1>Create an Account</h1>
<input name="username" type="text" placeholder="Username" />
<input name="email" type="text" placeholder="Email" />
<input name="password" type="password" placeholder="Password" />
<button>Register</button>
<Link to="/login">Do you have an account?</Link>
</form>
</div>
<div className="imgContainer">
<img src="/bg.png" alt="" />
</div>
</div>
);
}
export default Register;
这是app.js =
import express from "express";
import cors from "cors";
import authRoute from "./routes/auth.route.js"
import postRoute from "./routes/post.route.js"
import cookieParser from "cookie-parser"
const app = express();
app.use(cors({ origin: process.env.CLIENT_URL, credentials:true }));
app.use(express.json());
app.use(cookieParser());
app.use("/api/posts", postRoute)
app.use("/api/auth", authRoute);
app.listen(process.env.PORT, ()=>{
console.log("Server is running");
})
任何人请尝试帮助我捕获这个错误,以便我最终可以完成这个项目
@vaibhav-bais 你能告诉我你遇到了什么错误吗?
给我错误信息,我会帮忙
我可以在你的app.js中看到:
app.use("/api/posts", postRoute)
所以您正在使用
.use
并且您正在尝试 axios.post
。
您应该尝试将
app.use
更改为 app.post
,看看是否有效。