在从事 MERN 项目时,当我尝试从表单的注册页面获取数据时,我遇到了一个问题,Axios 给出了错误

问题描述 投票:0回答:2

在从事 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");
})

任何人请尝试帮助我捕获这个错误,以便我最终可以完成这个项目

reactjs node.js mongodb axios
2个回答
0
投票

@vaibhav-bais 你能告诉我你遇到了什么错误吗?

给我错误信息,我会帮忙


0
投票

我可以在你的app.js中看到:

app.use("/api/posts", postRoute)

所以您正在使用

.use
并且您正在尝试
axios.post

您应该尝试将

app.use
更改为
app.post
,看看是否有效。

© www.soinside.com 2019 - 2024. All rights reserved.