【问题标题】:axios.post works in postman but fails in frontend reactaxios.post 在邮递员中工作,但在前端反应中失败
【发布时间】:2021-12-23 16:34:12
【问题描述】:

搜索过去 2 天。没有任何效果。发生了一些真正令人困惑的事情。我是 MERN 的新手。 Axios.get 方法在浏览器上正常工作,但是当我尝试使用 axios.post 时,请求失败,状态码为 500。post 方法在 postman.in package.json 代理中工作正常 “代理”:“http://localhost:5000/api/”

这是代码

    import axios from "axios";
import { useState } from "react";
import { Link } from "react-router-dom";
import "./register.css";

const Register = () => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = async (e)=>{
      e.preventDefault();
      try{
          const res = await axios.post("/auth/register",{
          username,
          email,
          password
      });
      console.log(res);
      }catch(err){
        console.log(err.message);
      }  
    
  }


  return (
    <div className="register">
      <span className="registerTitle">Register</span>
      <form className="registerForm" onSubmit={handleSubmit} >
        <label>Username</label>
        <input
          type="text"
          className="registerInput"
          placeholder="Username"
         onChange={(e)=>setUsername(e.target.value)}
        />

        <label>Email</label>
        <input
          type="email"
          className="registerInput"
          placeholder="Email"
          onChange={(e)=>setEmail(e.target.value)}
         
        />

        <label>Password</label>
        <input
          type="password"
          className="registerInput"
          placeholder="password"
          onChange={(e)=>setPassword(e.target.value)}
          
        />
        <button className="registerButton" type="submit">
          Register
        </button>
      </form>
      <button className="registerLoginButton">
        <Link to="/login" className="link">
          Login
        </Link>
      </button>
    </div>
  );
};

export default Register;

后端代码是

const router = require("express").Router();
const User = require("../models/User");
const bcrypt = require("bcrypt");


//register
router.post("/register",async(req,res)=>{
    try{
        const salt = await bcrypt.genSalt(10);
        const hassedPass = await bcrypt.hash(req.body.password,salt);
        const newUser = new User({
            username: req.body.username,
            email: req.body.email,
            password: hassedPass,

        });
        const user = await newUser.save();
        res.status(200).json(user);

    }catch(err){
        res.status(500).json(err);
    }

})

【问题讨论】:

  • 您是否尝试将后端路由器设置为/auth/register
  • 是的先生,在 index.js 中这是代码 app.use("/api/auth", authRoute);

标签: reactjs axios mern


【解决方案1】:

HTTP 状态代码 500 是一般错误响应。这意味着服务器遇到了阻止它完成请求的意外情况。表示服务器代码或服务器有问题。

尝试在router.post()中将路由器更改为/auth/register URL

【讨论】:

    猜你喜欢
    • 2020-09-20
    • 2020-08-22
    • 2020-07-10
    • 1970-01-01
    • 1970-01-01
    • 2019-08-25
    • 2020-03-07
    • 1970-01-01
    • 2020-08-18
    相关资源
    最近更新 更多