012-kaopeilian/知识库/清除浏览器缓存指南.md

清除浏览器缓存以应用前端修复

问题现象

即使前端代码已修复并重启容器，浏览器仍然使用旧版本的JavaScript代码，导致：

• 文件上传失败
• material_id不存在的404错误
• AI分析无法启动

解决方案

方案1：硬刷新页面（推荐）⭐

Windows/Linux:

Ctrl + Shift + R
或
Ctrl + F5

Mac:

Cmd + Shift + R
或
Cmd + Option + R

这会强制浏览器重新下载所有资源，包括JavaScript文件。

方案2：清除浏览器缓存

Chrome/Edge

1. 按 Ctrl + Shift + Delete (Mac: Cmd + Shift + Delete)
2. 选择"时间范围"：最近1小时
3. 勾选：
   • ✅ 缓存的图片和文件
   • ✅ Cookie和其他网站数据（可选）
4. 点击"清除数据"

Firefox

1. 按 Ctrl + Shift + Delete (Mac: Cmd + Shift + Delete)
2. 选择"时间范围"：最近1小时
3. 勾选：
   • ✅ 缓存
   • ✅ Cookie（可选）
4. 点击"立即清除"

方案3：禁用缓存（开发模式）

仅在开发测试时使用

1. 打开开发者工具 (F12)
2. 切换到 Network 标签
3. 勾选 Disable cache
4. 保持开发者工具打开状态
5. 刷新页面

方案4：无痕/隐私模式

Chrome/Edge: Ctrl + Shift + N (Mac: Cmd + Shift + N) Firefox: Ctrl + Shift + P (Mac: Cmd + Shift + P)

在无痕模式下访问：

https://aiedu.ireborn.com.cn/manager/courses/1/edit

验证修复是否生效

1. 检查浏览器控制台

打开开发者工具 (F12)，在 Console 中查看：

修复前（错误）:

文件上传响应: {file_url: '/static/uploads/...', file_type: 'pdf', ...}
// 缺少 code 字段！

修复后（正确）:

文件上传响应: {code: 200, data: {file_url: '/static/uploads/...', ...}}
// 有 code 字段！

2. 检查Network标签

1. 打开开发者工具 (F12)
2. 切换到 Network 标签
3. 刷新页面 (F5)
4. 查找 http.*.js 文件
5. 查看 Size 列：
   • 如果显示 (memory cache) 或 (disk cache) → 使用了缓存
   • 如果显示实际大小（如 156 kB）→ 重新下载了

3. 测试上传功能

1. 访问编辑课程页面
2. 点击"上传资料"
3. 选择一个文件并上传
4. 观察浏览器控制台输出：

正确的输出顺序:

开始上传文件: xxx.pdf 大小: 1234567
文件上传响应: {code: 200, data: {...}}           ← 有code字段
准备创建资料记录: {name: 'xxx.pdf', ...}
创建资料记录响应: {code: 200, data: {id: 34, ...}}  ← 真实ID
自动启动AI知识点分析: 34 xxx.pdf

5. 刷新页面 - 文件应该仍然存在 ✅

常见问题

Q1: 硬刷新后仍然有问题？

A: 尝试完全清除缓存（方案2），然后关闭并重新打开浏览器。

Q2: 清除缓存后需要重新登录吗？

A: 如果清除了Cookie，需要重新登录。建议只清除"缓存的图片和文件"，不清除Cookie。

Q3: 无痕模式下可以正常使用，但正常模式不行？

A: 这确认了是缓存问题。在正常模式下清除缓存即可。

Q4: 如何确认使用的是最新版本的代码？

A:

1. 打开开发者工具 → Sources 标签
2. 找到 http.ts 文件
3. 搜索 upload 方法
4. 检查第392行是否没有 .then((response) => response.data)
5. 如果还有这行代码，说明缓存未清除

预防措施

1. 开发环境配置

在 vite.config.ts 中添加：

export default defineConfig({
  server: {
    headers: {
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Expires': '0'
    }
  }
})

2. 版本号管理

在HTML中添加版本查询参数：

<script src="/main.js?v=20251017"></script>

3. Service Worker清理

如果项目使用了Service Worker，需要额外清理：

// 在浏览器控制台执行
navigator.serviceWorker.getRegistrations().then(function(registrations) {
  for(let registration of registrations) {
    registration.unregister();
  }
});

快速操作清单

□ 硬刷新页面 (Ctrl + Shift + R) □ 打开开发者工具 (F12) □ 检查Console输出是否有 code: 200 □ 测试上传文件 □ 刷新页面验证文件是否仍存在 □ 如果仍有问题，完全清除缓存 □ 关闭并重新打开浏览器

---

最后更新: 2025-10-17 相关文档: /root/aiedu/文件上传和AI分析问题修复报告.md