会话过期后AJAX调用返回文件未找到错误，Single Page App会话管理遇设备休眠问题

这种情况我之前做SPA登录系统时也踩过坑，核心问题在于浏览器休眠/锁屏时JS定时器会被暂停，导致客户端计算的会话时长和服务器端真实状态脱节，再加上后端会话失效后的错误处理不到位，才出现了AJAX返回“文件未找到”的诡异情况。下面给你几个实用的解决方案：

1. 用后端心跳同步真实会话状态 #

别让客户端自己瞎算时间！最靠谱的方式是前端定时发心跳请求，直接从后端获取真实的会话剩余时长，这样不管设备休眠多久，醒来后第一次心跳就能拿到最准确的状态。

示例代码（原生JS）：

// 每5分钟发送一次心跳请求
setInterval(async () => {
  try {
    const response = await fetch('/api/session-heartbeat', {
      credentials: 'include' // 携带会话Cookie，确保后端能识别当前会话
    });
    const data = await response.json();
    // 更新客户端的会话倒计时
    updateSessionCountdown(data.remainingMinutes);
  } catch (err) {
    // 心跳失败说明会话已过期，直接触发登录跳转
    redirectToLogin();
  }
}, 5 * 60 * 1000);

后端的/api/session-heartbeat接口只需返回当前会话的剩余时长，若会话已过期则返回401状态码即可。

2. 结合用户交互重置会话追踪 #

单纯依赖定时器不靠谱，要结合用户的真实操作（点击、输入、滚动等）来重置客户端倒计时，同时通知后端续期会话：

// 监听所有用户交互事件
const userEvents = ['click', 'keydown', 'scroll', 'mousemove'];
let sessionCountdownTimer;

function resetSessionCountdown() {
  // 清除之前的定时器
  clearTimeout(sessionCountdownTimer);
  // 通知后端续期会话（如果后端支持活动续期逻辑）
  fetch('/api/refresh-session', { credentials: 'include' });
  // 重新设置倒计时，提前5分钟弹出警告
  sessionCountdownTimer = setTimeout(() => {
    showSessionExpireWarning();
  }, 30 * 60 * 1000 - 5 * 60 * 1000);
}

// 给每个交互事件绑定重置函数
userEvents.forEach(event => {
  document.addEventListener(event, resetSessionCountdown, { passive: true });
});

这样用户只要在操作，会话就会自动续期，倒计时也会跟着重置，避免休眠导致的时间偏差。

3. 全局拦截AJAX请求处理会话失效 #

不管前端追踪做得多好，总会有漏网之鱼（比如用户长时间没操作，刚好定时器没触发就休眠了）。这时候要全局拦截所有AJAX请求，统一处理会话失效的情况：

如果用Axios，可以写这样的响应拦截器：

axios.interceptors.response.use(
  response => response,
  error => {
    // 判断是否是会话过期（根据后端返回的状态码或响应内容）
    if (error.response.status === 401 || error.response.data.includes('登录')) {
      // 清除本地会话状态，跳转到登录页
      localStorage.removeItem('userInfo');
      window.location.href = '/login';
    } else if (error.response.status === 404) {
      // 很多时候“文件未找到”是后端重定向到登录页导致的，这里可以做二次判断
      alert('请求异常，请重新登录后尝试');
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

为什么会出现“文件未找到”？很大概率是后端会话过期后，把AJAX请求重定向到了登录页，前端拿到登录页的HTML内容，误以为是请求的资源不存在。所以后端要注意：对AJAX请求，会话过期时返回401状态码，而不是重定向，这样前端能准确识别。

4. 优化后端会话续期逻辑 #

确保后端在用户有活动时自动续期会话，比如每次处理用户的API请求（除心跳外），如果会话还未过期，就把会话的过期时间延长30分钟，而不是固定30分钟就过期。这样用户在活跃期间不会被强制踢下线。

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