Electron中如何仅针对特定图片元素禁用缓存不影响全局

全局追加disable-http-cache命令行开关的方案会作用于整个应用的所有网络请求，粒度太粗，要实现仅单个图片不走缓存，直接用下面两种方案即可，不会影响其他资源的正常缓存逻辑。

• 方案一：URL拼接随机参数（最轻量，无需主进程配置）
  原理是Electron的网络栈会将查询参数不同的URL识别为独立资源，不会命中本地已有缓存，只需要给目标图片的地址拼接上每次加载都变化的参数即可，其他图片完全不受影响。
  渲染进程示例代码：

  <!-- 目标图片标签 -->
  <img id="single-no-cache-img" src="https://your-domain.com/target-image.png">
  <script>
    const img = document.getElementById('single-no-cache-img')
    // 原地址没有查询参数用?拼接，已有参数的话把?换成&即可
    img.src = `${img.src}?nocache=${Date.now()}`
  </script>
  

  如果需要每次页面加载都拉取这张图的最新版本，每次给src重新赋值新的时间戳参数即可。

• 方案二：拦截指定请求设置缓存头（无需修改渲染层标签）
  如果不想改动图片的原始URL，可以在主进程通过Electron的webRequest接口，精准匹配到目标图片的请求，单独给它配置禁用缓存的请求头和响应头，其余所有资源都走默认缓存策略。
  主进程示例代码：

  const { session } = require('electron')
  
  // 替换成你需要禁用缓存的图片地址匹配规则
  const targetImgRule = { urls: ['https://your-domain.com/target-image.png'] }
  
  // 拦截发出去的请求，追加禁止缓存的请求头
  session.defaultSession.webRequest.onBeforeSendHeaders(targetImgRule, (details, callback) => {
    details.requestHeaders['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    details.requestHeaders['Pragma'] = 'no-cache'
    details.requestHeaders['Expires'] = '0'
    callback({ requestHeaders: details.requestHeaders })
  })
  
  // 拦截返回的响应，覆盖缓存相关响应头，双重保证不缓存
  session.defaultSession.webRequest.onHeadersReceived(targetImgRule, (details, callback) => {
    details.responseHeaders['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    details.responseHeaders['Pragma'] = 'no-cache'
    details.responseHeaders['Expires'] = '0'
    callback({ responseHeaders: details.responseHeaders })
  })
  

  如果你用了自定义partition的隔离会话，把代码里的session.defaultSession替换成你对应会话的session实例即可。

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