Chrome忽略Cache-Control no-store指令？

Question

我有一个web应用，允许用户添加JavaScript脚本，并在用户的浏览器中运行。当我本地开发新脚本时，我向应用程序添加了一个按钮，可以从本地运行的Web服务器加载它（即您单击它并输入http://path.to.my.pc:12345/script.js）。我的应用程序将获取此脚本并附加到DOM。

这些脚本被假定为ES6模块，Chrome可以正确递归导入这些模块。

但是，在本地运行时，我也希望用户能够进行“刷新”，以便应用程序再次访问他们的服务器以重新下载脚本。然而，Chrome似乎不想这样做。具体来说，尽管我的本地测试服务器已指定Cache-Control为no-store，但Chrome并不关心。即使我使用cacheBust script.js（例如http://blah/script.js?cb=randomInt），此cacheBust参数也不会递归传递给导入项。

这是我本地运行的开发服务器的文本：

const express = require("express");
const serveStatic = require("serve-static");
const morgan = require("morgan");

function setHeaders(res, path) {
    res.setHeader('Cache-Control', 'no-store');
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
}

const app = express();
app.use(morgan('combined'));
app.use(serveStatic('./', { setHeaders });

app.listen(12345);

还有其他什么可以做吗？我真的不想强迫我的用户运行webpack。这个想法是保持尽可能简单和愚蠢，让他们专注于编写自己的脚本。

编辑更新：在Devtools中勾选“禁用缓存”也不能防止Chrome实际上... 不缓存。

- FreeMemory

---

可能浏览器缓存中已经有脚本的副本了（在您添加 Cache-Control 标头之前插入）？Cache-Control: no-store 可以防止新的缓存条目，但不能阻止浏览器使用现有的条目（Cache-Control: no-cache, no-store 将同时防止两者）。如果您能展示获取并将脚本附加到 DOM 的代码，那也会很有帮助。 - Heiko Theißen

Answer 1

将脚本上传到 scripts 文件夹中，并通过设置 maxAge 选项以缓存控制的方式提供服务。每当用户刷新时，将加载存储在其浏览器缓存中的文件：

app.use('/scripts', express.static('./scripts', { maxAge: 1000 }));

{ maxAge: 1000 } 表示一个 HTTP 响应将在用户浏览器中作为缓存副本保留，以供下一次重用之前的 1000 秒内可用。

- Iglesias Leonardo

Answer 2

一些想法：

• 首先，您是否在“开发人员工具>应用程序>清除存储”中执行了操作，以避免使用以前的服务器实例缓存？
• 您尝试过“Cache-Control:no-cache, no-store”吗？
• 您尝试过非Chrome浏览器吗？
• 您是否清除了客户端浏览器中的所有内容（ctr+alt+suppr）或硬重载（ctrl+shift+r）？

我有同样的需求，在我的node服务器中我使用

const nocache = require('nocache');
app.use(nocache());
app.set('etag', false);

并且在客户端，我的查询仅使用

'Cache-control', 'no-store'

- BenoitB

Answer 3

你尝试过在当前头部一起实现ETag吗？ ETag指定了资源的版本，如果版本更改，它应该强制浏览器重新验证它。

- Jostein S