Axios未进入catch块无法捕获413错误，请求排查问题原因

问题排查与修复方案 #

现有代码存在的问题 #

• finally 回调使用错误：Axios的finally方法不接收任何参数，你代码中finally(error=>{console.log(error)})里的error永远是undefined，无法在这里打印错误信息。
• 冗余Promise包装：Axios请求本身就返回Promise实例，额外用new Promise包装属于冗余代码，处理不当可能导致错误传递异常。
• 错误捕获缺少安全判断：Action的catch块直接调用error.response.data.message，如果遇到网络错误、跨域错误等没有返回响应的场景，会直接抛出空指针异常，导致后续逻辑无法执行。
• 跨域配置问题：如果服务端/反向代理返回413时没有配置正确的跨域头，前端会被浏览器同源策略拦截，无法拿到响应内容和状态码。

代码修正 #

1. 修正service层代码

uploadNewDatDocuments(datId, files = [], additionalInfo = {}) {
    let url = new URL(this.baseUrl + this.uploadDocument.replace('{id}', datId));
    Object.keys(additionalInfo).forEach(queryParam => url.searchParams.set(queryParam, additionalInfo[queryParam]));
    let formData = new FormData();
    files.forEach(file => formData.append('files', file));
    // 直接返回axios请求实例，移除冗余的Promise包装
    return axios
        .post(url.toString(), formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(response => response.data)
        .catch(error => {
            console.log("error occurred", error)
            throw error;
        })
        .finally(()=>{
            console.log("上传请求执行结束");
        })
}

2. 修正Action层代码

export function uploadNewDocuments(datId, additionalInfo = {}, attachments = [], comment = {}) {
  return dispatch => {
    datService
      .uploadNewDatDocuments(datId, attachments, additionalInfo)
      .then(response => {
        const attachmentsIds = response.map(attachment => attachment.id);
        dispatch(
          DatCommentActions.addDatNewComment(datId, {
            ...comment,
            message: { ...comment.message, attachments: attachmentsIds }
          })
        );
      })
      .catch(error => {
        // 先做分层安全判断，避免空指针报错
        if (error.response) {
          // 服务端返回了响应，可直接读取状态码
          const status = error.response.status;
          if (status === 413) {
            dispatch(MessageActions.showMessage({ message: '上传文件大小超出限制，请压缩后重试' }));
          } else {
            // 处理其他业务错误
            const errMsg = error.response.data?.message || '文件上传失败，请稍后重试';
            dispatch(MessageActions.showMessage({ message: errMsg }));
          }
        } else if (error.request) {
          // 请求已发出但未收到响应，通常为网络异常、跨域配置错误
          dispatch(MessageActions.showMessage({ message: '网络异常，请检查网络后重试' }));
        } else {
          // 请求配置错误导致未发出
          dispatch(MessageActions.showMessage({ message: '请求配置异常，请重试' }));
        }
        console.error(error);
      });
  };
}

服务端配置排查（如果修正前端代码后仍无法获取413状态码） #

• 检查反向代理（如Nginx）的client_max_body_size配置，若该值小于上传文件大小，Nginx会直接返回413错误，需调整该参数，同时确保Nginx返回错误状态码时附带了正确的跨域响应头。
• 检查后端服务的跨域配置，确保Access-Control-Expose-Headers配置已开放响应头读取权限，让前端可以正常获取状态码和响应体内容。

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