MERN项目控制台出现400错误（未写console.log）求解决

先排查触发400错误的代码根源，再处理控制台错误提示的问题：

一、修复导致400错误的代码问题 #

你的代码中存在多处逻辑和拼写错误，这些是触发400状态码的直接原因：

1. 后端路由与前端请求路径不匹配 #

后端登录路由定义为 /sign-in，但前端axios请求的是 http://localhost:5000/api/log-in，路径不一致导致请求失败，需统一路径。

2. 后端sign-in路由的核心错误 #

• 解构请求参数时拼写错误：{emil,username} 应为 {email,password}，与前端传入的字段匹配
• 用户查找逻辑错误：用未定义的emil变量查询，导致找不到用户返回400
• 密码校验逻辑错误：用username和数据库中的user.username对比，实际应对比密码
• 未引入jsonwebtoken模块，jwt.sign会直接报错，且catch块为空，错误被吞掉
• Cookie过期时间计算错误：24 *60*60^1000是位运算，应为24 * 60 * 60 * 1000
• Cookie的domain设置错误：localhost无需加www，直接去掉domain参数即可

修正后的后端sign-in路由：

const express = require("express");
const router = express.Router();
const User = require("../models/model");
const bycrypt = require("bcryptjs");
const jwt = require("jsonwebtoken"); // 新增引入jwt模块

// 保留sign-up代码不变

router.post("/sign-in", async (req,res)=>{
    const {email,password} = req.body; // 修正解构字段
    if(!email || !password){ // 修正必填字段判断
        return res.status(400).json({message:"Please fill all the fields"});
    }
    try {
        const user = await User.findOne({email});
        if(!user){
            return res.status(400).json({message:"Invalid credentials"}); // 修正拼写错误
        }
        const isMatch = await bycrypt.compare(password,user.password); // 修正密码校验逻辑
        if(!isMatch){
            return res.status(400).json({message:"Invalid credentials"}); // 修正拼写错误
        }
        const token = jwt.sign({id:user._id},"jwefvuifyguyffwdjddctdvvfugwtr");
        const {password:hp,...rest}=user._doc;
        // 修正Cookie参数
        res.cookie("access_token",token,{
            httpOnly:true,
            expires: new Date(Date.now() + 24 * 60 * 60 * 1000),
            path:"/"
        });
        return res.status(200).json({message:"Login successful", user: rest}); // 返回成功响应
    } catch (error) {
        return res.status(500).json({message:error.message}); // 不要空catch，返回错误信息
    }
})

module.exports = router;

3. 前端代码的优化点 #

• 表单按钮同时绑定onClick和onSubmit逻辑冗余，直接在handleSubmit中处理请求
• 输入框id与label的for属性不匹配，修正id为email
• 请求路径改为与后端一致的/api/sign-in

修正后的前端代码：

import React from 'react'
import axios from 'axios'

const App = () => {
  const [input,setInput] = React.useState({
    email:"",
    password:""
  });
  const handleOnchange = (event) =>{
    setInput({
      ...input,[event.target.name]:event.target.value
    })
  }
  const handleSubmit = async (event) =>{
    event.preventDefault();  
    try {
      const response = await axios.post("http://localhost:5000/api/sign-in",input,{withCredentials:true});
      console.log(response.data); // 登录成功后的逻辑处理
    } catch (err) {
      // 这里仅处理UI提示，不打印控制台错误即可隐藏提示
      // 比如：setError(err.response?.data?.message || "Login failed")
    }
  }

  return (
    <>
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" value={input.email} onChange={handleOnchange}/>

      <label htmlFor='password'>Password</label>
      <input type="password" name="password" id="password" value={input.password} onChange={handleOnchange}/>
      <button type="submit">Submit</button>
    </form>
    </>
  )
}

export default App;

二、消除控制台错误提示的方法 #

axios在请求返回4xx/5xx状态码时会自动抛出异常，若未用try/catch捕获，浏览器会在控制台显示未处理的Promise错误。用try/catch包裹axios请求，即可自主控制错误逻辑，避免控制台自动抛出提示：

• 将请求放在try块中，正常处理成功响应
• 在catch块中仅处理页面UI提示（比如设置错误状态显示在页面），不执行console.error，即可消除控制台的错误提示

注意：浏览器Network面板仍会显示请求的400状态，这是请求的实际状态，无法隐藏，但控制台的错误提示可通过捕获异常消除。

内容的提问来源于stack exchange，提问作者Shan Zulfiqar