如何让指定XMLHttpRequest GET请求跳过浏览器缓存获取最新资源

解决方案 #

最可靠且符合你要求的实现方式是给请求URL追加唯一的随机查询参数，利用浏览器缓存按完整URL命中的规则绕开已有缓存：

const xmlHttp = new XMLHttpRequest();
// 追加时间戳作为唯一参数，确保每次强制刷新的请求URL都不重复
const requestUrl = `myapi/getThing?_t=${Date.now()}`;
xmlHttp.open("GET", requestUrl, true);
// 其他请求逻辑保持不变

方案说明

• 不需要修改服务端任何配置，绝大多数服务端接口会自动忽略无业务含义的查询参数，不会影响接口正常返回
• 不会破坏原有缓存策略：普通场景下请求仍使用原URL即可正常享受服务端设置的缓存，仅在你确认需要拉取最新内容时追加该参数
• 全浏览器兼容，不存在适配问题

为什么你之前设置Cache-Control请求头不生效？

因为服务端返回的响应头包含immutable指令，该指令的规则明确要求：只要缓存资源还在max-age有效期内，浏览器会直接忽略客户端发起的任何缓存校验、跳过缓存的请求，直接返回本地缓存内容，因此你设置的请求头不会生效。

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