React中浏览器关闭时如何发送请求？Django会话及事件失效问题

前端：替换浏览器关闭检测事件 #

window.onblur会在切换标签页、最小化浏览器时触发，并非仅在关闭浏览器时生效，完全不符合需求。建议改用beforeunload和unload事件，同时使用navigator.sendBeacon发送请求——普通AJAX/fetch在页面卸载时大概率会被浏览器中断，而sendBeacon是异步且不阻塞页面卸载的API，可靠性更高。

修改后的React代码：

import { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    const handlePageUnload = () => {
      const stid = localStorage.getItem('stationid');
      if (!stid) return;

      // 注意：sendBeacon默认发送POST请求，若后端仅接受DELETE方法，需调整后端逻辑适配
      const requestUrl = STATION_ID(stid);
      navigator.sendBeacon(requestUrl, JSON.stringify({ action: 'delete' }));
    };

    window.addEventListener('beforeunload', handlePageUnload);
    window.addEventListener('unload', handlePageUnload);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handlePageUnload);
      window.removeEventListener('unload', handlePageUnload);
    };
  }, []);

  return <div>你的组件内容</div>;
};

export default YourComponent;

Django会话配置排查 #

SESSION_EXPIRE_AT_BROWSER_CLOSE=True不生效，通常是配置冲突导致：

• 检查settings.py，确保未设置SESSION_COOKIE_AGE——这个参数会直接覆盖浏览器关闭过期的规则，一旦设置，会话将按固定时长过期
• 确认SESSION_ENGINE为默认的django.contrib.sessions.backends.db，缓存型会话后端（如django.contrib.sessions.backends.cache）不遵循浏览器关闭过期的逻辑
• 本地开发时不要开启SESSION_COOKIE_SECURE=True，否则非HTTPS环境下Cookie无法保存，会话直接失效

另外注意：Django不会自动清理过期会话，需定期执行python manage.py clearsessions命令删除过期数据。如果业务依赖会话过期触发字段修改，不能仅靠前端请求，需加兜底方案：

• 给目标非用户模型添加last_active字段，用户每次操作时更新该字段
• 用定时任务（如Celery）定期扫描last_active超过会话超时时间的记录，自动修改对应字段

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