Question

我想确保通过AJAX调用请求的数据是新鲜的而不是缓存的。因此，我发送标题Cache-Control: no-cache

但是，如果用户按下F5，我的Chrome版本33将使用Cache-Control: max-age=0覆盖此标头。

实施例。将test.html放在包含内容

的网络服务器上

<script>
    var xhr = new XMLHttpRequest;
    xhr.open('GET', 'test.html');
    xhr.setRequestHeader('Cache-Control', 'no-cache');
    xhr.send();
</script>

在网络选项卡上的chrome调试器中，我看到了test.html AJAX调用。状态代码200.现在按F5重新加载页面。 max-age：0，状态代码304 Not Modified。

Firefox显示了类似的行为。刚刚覆盖请求头的Intead将其修改为Cache-Control：无缓存，F5上的max-age = 0。

我可以抑制这个吗？

Answer 1

另一种方法是在网址上附加一个唯一的数字。

<script>
    var xhr = new XMLHttpRequest;
    xhr.open('GET', 'test.html?_=' + new Date().getTime());
    //xhr.setRequestHeader('Cache-Control', 'no-cache');
    xhr.send();
</script>

时间戳不是很独特，但它应该对您的用例来说足够独特。

Answer 2

现在，出于多种原因，使用查询字符串进行缓存控制并不是您的最佳选择，this answer中仅提及了一些。他甚至解释了新的标准版本控制方法。虽然如果您只想设置请求标头，正确的方法是：

xhr.setRequestHeader('cache-control', 'no-cache, must-revalidate, post-check=0, pre-check=0');
xhr.setRequestHeader('cache-control', 'max-age=0');
xhr.setRequestHeader('expires', '0');
xhr.setRequestHeader('expires', 'Tue, 01 Jan 1980 1:00:00 GMT');
xhr.setRequestHeader('pragma', 'no-cache');

希望这有助于将来的任何人。

Answer 3

http.setRequestHeader("Cache-Control", "no-cache, no-store, must-revalidate");

Answer 4

我尝试（但失败）了对 URL 的某种随机化，但它不起作用，因为我正在访问的文件 (.json) 也被缓存了。

我的解决方案是在对 json 文件名的调用中添加时间戳（与上述方法类似，稍作修改）。这对我来说非常有效（下面的代码片段）。

doSomething('files/data.json?nocache=' + (new Date()).getTime(), function(text){...

我对这一切都很陌生，所以我确信这不是标准/正确的解决方案是有原因的，但它对我有用。

强制缓存控制：在F5重新加载时通过XMLHttpRequest在Chrome中进行无缓存

4 个答案: