React登录组件Axios请求输错凭证返回400未获得预期错误响应问题

问题根因 #

Axios的默认行为是：当HTTP响应状态码不在200~299区间时，会直接抛出Promise异常。你当前的await axios.post()没有做异常捕获，所以登录失败后端返回400状态码时，代码直接进入未捕获报错流程，后面的重置表单、错误提示逻辑都不会执行。

解决方案 #

方案1：给async函数加try/catch捕获异常（推荐） #

修改你的handleSubmit函数，把Axios请求逻辑包裹在try块中，错误逻辑放到catch块处理：

const handleSubmit = async (evt) => {
    evt.preventDefault()
    const config = { headers: { 'Content-Type': 'application/json' } }
    const data = JSON.stringify({ username, password })
    console.log(data)
    try {
        const response = await axios.post(`${HOST}/api/auth/login`, data, config)
        console.log(response.data)
        // 登录成功的逻辑，比如存token、跳转
        resetUsername()
        resetPassword()
    } catch (error) {
        // 捕获请求错误，包括400的情况
        console.log(error.response.data)
        // 弹出后端返回的错误提示
        alert(error.response?.data?.message || "登录失败，请稍后重试")
        // 如果需要登录失败也清空表单可以在这里调用reset方法
        // resetUsername()
        // resetPassword()
    }
}

注意错误响应的内容存放在error.response.data中，直接从catch捕获的error对象里就能拿到后端返回的message字段。

方案2：修改Axios配置，让400状态码不抛出异常 #

如果你不想用try catch，也可以在请求配置里加validateStatus字段，自定义什么状态码算请求成功：

const handleSubmit = async (evt) => {
    evt.preventDefault()
    const config = { 
        headers: { 'Content-Type': 'application/json' },
        // 2xx和400状态码都算请求成功，不抛出异常
        validateStatus: (status) => (status >= 200 && status < 300) || status === 400
    }
    const data = JSON.stringify({ username, password })
    console.log(data)
    const response = await axios.post(`${HOST}/api/auth/login`, data, config)
    // 之后就可以直接判断response.data.success的值
    if(response.data.success) {
        // 登录成功逻辑
        console.log(response.data)
        resetUsername()
        resetPassword()
    } else {
        // 登录失败逻辑
        alert(response.data.message)
    }
}

这种方式你之前注释掉的判断success的代码可以直接复用，不需要额外捕获异常。

内容的提问来源于stack exchange，提问作者Yash Falke