超链接缓存返回旧内容 加随机参数与no-cache头仍未解决

可行解决方案 #

• 首先验证前端随机参数是否实际生效，通过浏览器F12网络面板确认每次请求的video.php的v参数值均不重复，排查是否存在前端代码拼接错误、参数被服务器重写丢弃的问题。
• 确认禁用缓存的响应头没有被上层服务覆盖，查看请求实际返回的响应头是否包含你设置的Cache-Control等字段，如果是被Nginx、CDN等中间件覆盖，需要在对应服务的规则中修改视频接口的缓存策略。
• 在现有响应头基础上补充配置：

  // 强制过期时间设为过去的时间
  header('Expires: Thu, 01 Jan 1970 00:00:00 GMT');
  // 每次生成唯一的ETag，避免浏览器协商缓存返回304
  header('ETag: "'.md5(uniqid()).'"');
  // 移除Last-Modified响应头
  header_remove('Last-Modified');
  

• 更换请求方式规避GET缓存，浏览器默认不会缓存POST请求的响应：
  如果是video元素加载资源，可以用fetch发起POST请求后转blob地址赋值：

  fetch('https://example/video.php', {method: 'POST'})
    .then(res => res.blob())
    .then(blob => {
      const videoEl = document.querySelector('video');
      // 释放之前的blob资源避免缓存
      if(videoEl.src) URL.revokeObjectURL(videoEl.src);
      videoEl.src = URL.createObjectURL(blob);
    })
  

• 如果是直接跳转超链接看视频，改为表单POST提交跳转：

  <form id="videoForm" action="https://example/video.php" method="POST" target="_blank">
    <button type="submit">查看实时流</button>
  </form>
  

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