Axios+Express+Node.js环境下PUT请求失败后前端无法获取后端返回的errorMessage问题排查

这问题我之前也碰到过，核心原因是Axios的响应处理机制在搞鬼：当后端返回4xx/5xx这类非成功状态码时，Axios会自动把这个响应当成错误，直接丢进.catch()回调里，根本不会走到你写的.then()逻辑里。

具体拆解： #

• 后端代码是没问题的：你返回400状态码+带errorMessage的JSON对象，console.log也能输出错误信息，说明后端已经正确生成了错误响应。
• 前端逻辑踩了Axios的坑：你现在在.then()里判断res.errorMessage，但因为400不是2xx状态码，这个分支根本不会执行，错误信息其实藏在.catch()的err.response.data里。

修改后的前端代码： #

handleSubmit = (event) => { 
  event.preventDefault(); 
  const authorization = localStorage.getItem("accessToken"); 
  axios 
    .put( 
      `${process.env.REACT_APP_SERVER_URL}/settings/password`, 
      this.state.user, 
      { headers: { authorization, }, } 
    ) 
    .then((res) => { 
      // 只有状态码2xx才会走到这里，直接处理成功逻辑
      console.log("updating - res:", res); 
      this.setState({ user: res.data, }); 
    }) 
    .catch((err) => { 
      // 非2xx状态码的响应都会走到这里
      if (err.response?.data?.errorMessage) {
        console.log(err.response.data.errorMessage, "Unsuccessful password updated"); 
      } else {
        console.log(err, "ERROR"); 
      }
    }); 
};

补充说明： #

• 用err.response?.data?.errorMessage是做了可选链判断，避免因为某些极端情况（比如后端没返回data，或者网络错误连response都没有）导致代码报错。
• 如果你希望某些4xx状态码也进入.then()，可以给Axios配置validateStatus选项，比如：

axios.put(url, data, {
  headers: { authorization },
  validateStatus: (status) => status < 500 // 只要状态码小于500都进入then
})

不过一般不建议这么做，遵循HTTP状态码的语义会让逻辑更清晰。

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