AJAX请求遇403错误时，如何捕获并读取后端返回的JSON响应？

这个问题我之前做项目时也踩过坑！核心原因是绝大多数AJAX类库（不管是原生fetch、jQuery还是axios）都会把4xx、5xx这类HTTP错误状态码的请求判定为「失败」，不会走常规的.then成功回调，而是直接跳转到错误处理分支。要拿到后端返回的403对应的JSON响应，关键是要在错误逻辑里手动读取响应内容，下面分几种常见的场景给你具体方案：

1. 使用原生Fetch API的情况 #

Fetch比较特殊：它的Promise只有在网络层面彻底失败（比如断网、域名解析失败）时才会reject；像403这种HTTP错误码，Promise其实是resolved状态，但response.ok会变成false。所以我们需要先判断response.ok，把异常响应抛到catch分支，再读取JSON：

fetch('/your-post-api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // 加上你需要的其他请求头，比如Authorization
  },
  body: JSON.stringify(yourRequestPayload)
})
.then(response => {
  // 先判断响应状态是否正常
  if (!response.ok) {
    // 把响应对象抛到catch里处理
    return Promise.reject(response);
  }
  // 正常响应就解析JSON
  return response.json();
})
.then(successData => {
  // 处理成功响应的逻辑
  console.log('请求成功:', successData);
})
.catch(error => {
  // 区分是响应错误还是网络错误
  if (error instanceof Response) {
    // 这里的error就是403对应的响应对象，解析它的JSON
    error.json().then(errorData => {
      console.log('403错误详情:', errorData);
      // 比如给用户提示权限不足：alert(errorData.message)
    });
  } else {
    // 处理网络层面的错误
    console.log('网络请求失败:', error);
  }
});

2. 使用jQuery $.ajax的情况 #

jQuery的ajax默认会把所有非2xx的状态码直接扔进error回调，我们可以在回调里通过xhr对象拿到响应内容：

方式一：在error回调里判断状态码 #

$.ajax({
  url: '/your-post-api',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(yourRequestPayload),
  success: function(successData) {
    // 成功处理逻辑
    console.log('请求成功:', successData);
  },
  error: function(xhr, statusText, errorThrown) {
    if (xhr.status === 403) {
      // 直接解析响应文本为JSON
      const errorData = JSON.parse(xhr.responseText);
      console.log('403错误详情:', errorData);
    } else {
      // 处理其他错误
      console.log(`请求出错：${statusText}`, errorThrown);
    }
  }
});

方式二：用statusCode精准匹配403 #

如果只想单独处理403错误，可以用statusCode配置项：

$.ajax({
  url: '/your-post-api',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(yourRequestPayload),
  success: function(successData) {
    console.log('请求成功:', successData);
  },
  statusCode: {
    403: function(xhr) {
      const errorData = JSON.parse(xhr.responseText);
      console.log('403错误内容:', errorData);
    },
    // 还可以添加其他状态码的处理逻辑
    404: function() {
      alert('接口不存在');
    }
  }
});

3. 使用Axios的情况 #

Axios会把所有HTTP错误码（4xx/5xx）的请求抛到catch分支，直接通过error.response.data就能拿到后端返回的JSON，非常方便：

axios.post('/your-post-api', yourRequestPayload, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log('请求成功:', response.data);
})
.catch(error => {
  if (error.response?.status === 403) {
    // 直接获取403对应的JSON响应
    console.log('403错误详情:', error.response.data);
  } else {
    console.log('请求失败:', error.message);
  }
});

最后要注意的细节 #

• 确保后端返回403时，响应头的Content-Type设置为application/json，不然前端解析JSON会报错；
• 如果后端返回的JSON格式有问题，也要检查一下格式是否符合标准（比如引号是否是双引号）。

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