AJAX拦截器失效排查指南：当你的beforeSend有效但error/complete沉默时

问题现象

开发者常遇到这样的场景：

$.ajaxSetup({
  beforeSend: () => console.log("✅ 触发"), // 正常执行
  error: () => console.log("❌ 未触发"),   // 静默失效
  complete: () => console.log("⚡ 未触发")  // 同样沉默
});

四大核心原因

1. 同步请求封锁
   async: false会导致浏览器线程阻塞，使异步回调无法执行

2. 配置覆盖战争
   多次调用$.ajaxSetup()会产生配置覆盖（后者覆盖前者）

3. 跨域隐形拦截
   未正确配置CORS时，浏览器会静默丢弃响应

4. 执行顺序陷阱
   拦截代码未在首个AJAX请求前加载

六步终极解决方案

1. 强制异步模式

$.ajax({ 
  async: true, // 必须显式声明
  // ...其他参数
});

2. 事件委托方案（推荐）

$(document)
  .ajaxSend(() => console.log("🌐 全局beforeSend"))
  .ajaxError(() => console.log("💥 全局error")) 
  .ajaxComplete(() => console.log("🎯 全局complete"));

3. 跨域配置模板

# 服务器响应头必须包含
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,OPTIONS
Access-Control-Allow-Headers: Content-Type

4. 错误增强处理

error: (xhr) => {
  if(xhr.status === 0) alert("网络断开/CORS拦截");
  if(xhr.status === 401) location.href = '/login';
}

5. 防御式编程

// 防止第三方库覆盖
const originalAjax = $.ajax;
$.ajax = function() {
  console.log("🛡️ 请求拦截");
  return originalAjax.apply(this, arguments);
};

6. 现代替代方案

// 使用fetch API + AbortController
const controller = new AbortController();
fetch(url, { 
  signal: controller.signal 
}).catch(e => {
  if(e.name === 'AbortError') console.log("请求被取消");
});

最佳实践清单

• ✅ 永远使用$(document).ajaxSend替代$.ajaxSetup

• ✅ 在$(document).ready()中初始化拦截器

• ✅ 为关键请求添加超时控制

• ✅ 在Node.js测试环境验证拦截逻辑