如何通过编程方式禁用特定资源的缓存？

云上老周

2026-5-19

针对特定资源禁用Fetch API缓存的方法

当然有办法实现！既然你已经在Chrome DevTools里配置了全局缓存设置，但需要针对单个特定资源禁用缓存，Fetch API提供了两种直接且灵活的方案，下面给你详细说明：

1. 使用Fetch的`cache`配置选项

Fetch API本身自带了cache参数，你可以通过设置不同取值精准控制缓存行为，最常用的两个选项是：

'no-store'：浏览器不会存储该请求的任何响应数据，每次请求都会直接从服务器获取最新资源，完全绕过缓存，是彻底禁用缓存的首选。
'reload'：强制从服务器获取资源，但获取到的响应会被存入缓存（适合后续可能需要复用缓存，但当前请求必须拿最新内容的场景）。

示例代码：

// 完全禁用该资源的缓存，每次都从服务器拉取最新内容
fetch('/api/your-specific-data', {
  cache: 'no-store'
})
.then(response => response.json())
.catch(err => console.error('请求失败:', err));

2. 设置`Cache-Control`请求头

你也可以通过自定义HTTP请求头Cache-Control来告诉浏览器不要使用缓存，常用的取值包括：

no-store：和上面的cache选项效果一致，彻底禁止浏览器存储和使用该资源的缓存；
max-age=0：强制浏览器先向服务器验证缓存是否新鲜，若缓存过期则拉取新资源。

示例代码：

fetch('/assets/your-specific-resource.js', {
  headers: {
    'Cache-Control': 'no-store'
  }
})
.then(response => response.text())
.catch(err => console.error('请求失败:', err));