Laravel接口返回400状态码时axios无法接收响应如何解决

axios 默认仅将200~299区间的HTTP状态码识别为请求成功，只有符合这个规则的响应才会进入.then()回调。
后端返回400状态码属于客户端错误类响应，axios会直接判定请求失败，走.catch()错误回调逻辑。当前前端代码只实现了.then()分支，没有对错误回调做处理，才会出现“收不到响应”的表现——实际上响应已经正常返回，只是没有被代码捕获。
当移除400状态码参数、接口默认返回200时，响应符合axios的成功判定规则，自然就能进入.then()被正常接收。

保留后端400错误状态码返回的前提下，给前端axios请求补上错误分支的捕获逻辑即可，参考代码：

const login = async () => {
    await axios.post("/api/login", form)
        .then((response) => {
            // 处理200状态码：登录成功逻辑
            console.log(response.data.message);
            // 此处可写存储token、跳转用户中心等业务逻辑
        })
        .catch((error) => {
            // 处理4xx/5xx状态码：登录失败逻辑
            if (error.response) {
                // error.response.data 就是后端返回的JSON响应体
                console.log(error.response.data.message);
                // 此处可写账号密码错误提示等逻辑
            }
        });
};

注意：不建议修改axios的状态码校验规则强制让400响应进入.then()分支，4xx状态码本身代表客户端请求有误，走错误分支处理更符合HTTP语义规范。

内容的提问来源于stack exchange，提问作者Mishen Thakshana