JS使用fetch读取文件内容变更后Chrome仍返回旧数据如何解决

Chrome对GET类型的静态资源请求默认会启用HTTP缓存，你的fetch请求没有配置缓存策略，所以只要资源还在缓存有效期内，浏览器就会直接返回本地缓存的旧内容，不会发起新的请求拉取更新后的文件。

方法1：修改fetch配置（最方便，前端代码直接改即可） #

在fetch的第二个参数里添加cache配置项，可选两个值：

• 'no-store'：完全跳过缓存，每次都直接从服务器拉取最新内容，也不会把本次响应存入缓存，适合需要绝对实时读取文件的场景
• 'no-cache'：会先发送请求到服务器校验文件是否有更新，服务器返回304则复用本地缓存，返回200则使用新内容，兼顾实时性和带宽节省

修改后的代码如下：

function readTextFile(file)
{
    fetch(file, {
      cache: "no-store" // 不需要缓存就用这个配置
      // cache: "no-cache" 需要校验更新的话用这个
    })
    .then(response => response.text())
    .then(text => console.log(text))
}

方法2：服务器端配置响应头（适合生产环境全局生效） #

如果不想修改前端代码，可以在托管静态文件的服务器上添加响应头配置：

Cache-Control: no-cache

同时配置ETag或者Last-Modified响应头，浏览器会自动在每次请求时带上校验信息，确认文件更新就拉取新内容，否则复用缓存。

方法3：临时调试用URL加随机参数 #

不需要改请求配置也不需要改服务器的话，可以在请求的文件路径后加时间戳随机参数，让每次请求的URL都不同，不会命中历史缓存：

fetch(`${file}?t=${Date.now()}`)

这个方法不推荐在生产环境使用，会导致大量冗余缓存条目，仅适合本地调试临时用。

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