Axios 抛出内部服务器错误，但 api url 有效

Question

我希望你们都平安。 我的问题： URL 工作正常，那里没有未定义的 URL 错误。当我输入良好的凭据时，它可以正常工作并将我带到我希望的位置。但是每当我试图查看错误时，它都不会出现。甚至，在 if 条件下，我尝试 console.log(res.data.errors) 但没有显示。即使 console.log("Hello it not working") 在 if 条件下也根本不起作用......我很困惑。你能帮忙吗？但其他工作正常。请问我做错了什么？

import React, { useState } from "react";
import { Link } from "react-router-dom";
import SideBar from "../components/SideBar";
import "./profil.css";
import axios from "axios";

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

  const handleLogin = (e) => {
    e.preventDefault();
    const emailError = document.querySelector(".email.error");
    const passwordError = document.querySelector(".password.error");

    axios({
      method: "post",
      url: `${process.env.REACT_APP_API_URL}api/user/login`,
      withCredentials: true,
      data: {
        email,
        password,
      },
    })
      .then((res) => {
        if (res.data.errors) {
          emailError.innerHTML = res.data.errors.email;
          passwordError.innerHTML = res.data.errors.password;
        } else {
          window.location = "/";
        }
      })
      .catch((err) => {
        if (err.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(err.response.data);
          console.log(err.response.status);
          console.log(err.response.headers);
        } else if (err.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(err.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', err.message);
        }
        console.log(err.config);
      });
  };
  return (
    <>
      <SideBar />
      <div className="form-container">
        <input type="checkbox" id="flip" />
        <div className="cover">
          <div className="front">
            <img src="dog-4977599_1920.jpg" alt="" />
            <div className="text">
              <span className="text-i">Welcome to ChablisLAB</span>
              <span className="text-j">Please Login before continue</span>
            </div>
          </div>
          <div className="back">
            <img className="backImg" src="diary-92652_1920.jpg" alt="" />
            <div className="text">
              <span className="text-i">Welcome to ChablisLAB</span>
              <span className="text-j">Just a few step to gain access</span>
            </div>
          </div>
        </div>
        <form>
          <div className="form-content">
            <div className="login_form">
              <div className="title">Login</div>
              <div className="input_boxes">
                <div className="input_box">
                  <i className="bx bx-envelope"></i>
                  <input
                    type="email"
                    onChange={(e) => setEmail(e.target.value)}
                    value={email}
                    placeholder="Enter your email"
                  />
                </div>
                <div className="email error"></div>
                <div className="input_box">
                  <i className="bx bxs-lock"></i>
                  <input
                    type="password"
                    onChange={(e) => setPassword(e.target.value)}
                    value={password}
                    placeholder="Password"
                  />
                </div>
                <div className="password error"></div>
                <div className="box_forgot_pass">
                  <Link to="#">Forgot password?</Link>
                </div>
                <div className="button input_box">
                  <input onClick={handleLogin} type="submit" value="Login" />
                </div>
                <div className="text sign-up-text">
                  Don't have an account?
                  <label htmlFor="flip">Signup now</label>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </>
  );
}

export default Profil;

.error{
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

我认为您需要在添加 if 条件之前控制台 res.data.errors。您可能会在错误的属性上设置条件，而您没有得到响应。

axios({
  method: "post",
  url: `${process.env.REACT_APP_API_URL}api/user/login`,
  withCredentials: true,
  data: {
    email,
    password,
  },
})
  .then((res) => {
    console.log(res.data.errors, res.data); //check like this then put condition if you are getting res.data.errors property in response  
    if (res.data.errors) {
      emailError.innerHTML = res.data.errors.email;
      passwordError.innerHTML = res.data.errors.password;
    } else {
      window.location = "/";
    }
  })