怎么防止HTML缓存机制误伤关键接口-html教程-PHP中文网

html缓存头不可污染api接口，必须按路径精确分离策略：html设no-cache,must-revalidate，api设no-store，并禁用cdn/代理对/api/的缓存。

怎么防止html缓存机制误伤关键接口

HTML缓存头别污染接口响应

HTML 文件的缓存策略（比如 Cache-Control: no-cache）只该作用于 HTML 本身，绝不能“顺手”让所有响应都带上同样头——尤其不能波及 API 接口。否则，fetch("/api/user") 可能被浏览器或中间代理缓存，导致用户看到过期数据，且刷新也无效。

常见错误：在 Nginx 的 server 块顶层加 add_header Cache-Control "no-cache"，结果所有路径（包括 /api/）都被强制校验，违背 REST 接口幂等性设计初衷
正确做法是按路径精确控制：对 HTML 路径（如 /index.html、/*.html）设 no-cache, must-revalidate；对 API 路径（如 /api/、/graphql）单独设 no-store
Express 中不要用 app.use((req, res, next) => { res.set("Cache-Control", "...") }) 全局拦截，而应在具体路由里写：app.get("/api/*", (req, res) => { res.set("Cache-Control", "no-store"); next(); })
CDN（如 Cloudflare）默认可能对所有 GET 请求启用缓存，必须进控制台关闭 /api/* 路径的缓存开关，或配置「Cache Level: Bypass」

fetch 默认会缓存 GET，但你没意识到

Vue/React 项目里调 fetch("/api/data") 拿列表，第二次进页面却显示旧数据？不是后端没更新，是浏览器把这次请求当静态资源缓存了——即使响应头写了 no-cache，Safari 和部分 Chromium 版本仍可能磁盘缓存 GET 响应。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

fetch 默认行为是遵循 HTTP 缓存规则，不加 cache 选项就等于 cache: "default"，它真会复用缓存
显式禁用：用 fetch(url, { cache: "no-store" }) 或 { cache: "reload" }（后者强制跳过缓存并重发请求）
axios 用户注意：cache: false 在 v1.7+ 才原生支持；老版本更稳妥的是加时间戳参数：params: { t: Date.now() }，或手动设头：headers: { "Cache-Control": "no-store" }
别依赖 no-cache 让浏览器“每次验证”，因为协商缓存（ETag / Last-Modified）仍可能返回 304 并复用旧响应体——对 API 来说，这和缓存没区别

HTML 和 API 缓存策略必须分离部署

同一域名下，HTML 和接口共用一个服务端配置时，最容易出问题。比如 Vercel 上只配了一条 _headers 规则匹配 /**/*.html，但忘了 /api/ 路由实际走的是 Serverless Function，它的响应头由函数内部控制，不会继承静态规则。

Nginx 示例：为 HTML 单独写 location，避免和 proxy_pass 冲突

location = /index.html {
  add_header Cache-Control "no-cache, must-revalidate";
}
location /api/ {
  proxy_pass http://backend;
  # 这里必须显式清除或覆盖上游带的缓存头
  proxy_hide_header Cache-Control;
  add_header Cache-Control "no-store";
}

Netlify 用户：在 netlify.toml 中，[[headers]] 规则按 path 匹配，务必分开写两段：for = "/index.html" 和 for = "/api/*"，不要合并成通配
本地开发用 file:// 协议时，HTTP 头根本不存在，所有缓存测试都无效——必须走 localhost 启服务验证

最常被忽略的一点：HTML 页面里内嵌的 script 或 link 标签加载的 JS/CSS，其缓存行为完全独立于 HTML，但它们的版本若和 HTML 不同步（比如 HTML 缓存了 1 小时，JS 却已更新），就会出现白屏或报错。所以 index.html 必须短缓存（max-age=0 或 no-cache），而 JS/CSS 要靠文件哈希命名+长期强缓存来解耦。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！