当AngularJS网站中的网站内容发生变化时，如何使index.html不缓存？

Posted 2023-03-05

【中文标题】当AngularJS网站中的网站内容发生变化时，如何使index.html不缓存？

【英文标题】：How to make index.html not to cache when the site contents are changes in AngularJS website?

【发布时间】：2016-04-23 10:02:27

【问题描述】：

通常对于.js 和.css 文件，我们将在构建期间附加一个版本，例如 xx.js?v=123，然后在网站部署后，我们可以得到新版本的js和CSS。但是我没有看到一个地方谈论如何在网站部署发生时进行index.html 文件升级。我们确实在 IE 中看到 HTML 内容应该已经更改，但它仍然使用旧的 HTML 内容。

我从谷歌找到的一个解决方案是

<meta http-equiv="Cache-control" content="no-cache">

但是，我不确定这是否是最好的解决方案？

【参考方案1】：

是的，这是正确的方法。您必须设置 Cache-Control 标头以让浏览器知道他们不必为该请求缓存任何内容。

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

（Pragma & Cache-Control 是一回事，但来自不同的 HTTP 规范。请在此处查看答案：Difference between Pragma and Cache-control headers?）

在此处查看相关答案之一：How to burst yeoman index.html cache

【讨论】：

如何破坏将“答案”缓存到配置错误的网络服务器的关键功能？

@RickO'Shea 我没听懂你吗？你能解释一下，什么是完全错误的？作者要求index.html 的突发缓存，所以我相应地回答，如果你想为 png 文件添加no-cache 标头，则必须配置服务器，例如 Apache 或 nginx。我知道这个标头也可以通过服务器配置直接添加，但我是根据问题回答的。

@RickO'Shea 这是否也会禁用 js 和 css 文件的缓存？这些文件很大，总是需要缓存。

这个解决方案会破坏其他资产的缓存还是仅仅破坏 index.html？

此页面上的两个解决方案都应包括 Cache-control max-age=0，根据 mozilla，使用 HTTP/1.0 的代理需要它。参考：developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…

【参考方案2】：

正如 cmets 中提到的，它确实是您想要查看的服务器配置，但您没有提及您的设置。我们使用 IIS 运行带有 .NET 后端的 AngularJS 站点。

我们会定期更新我们的网站，过去曾遇到过 JS 和 CSS 资源缓存的问题，但我们已通过以下设置解决了该问题：

构建

我们使用 gulp 来构建我们的 AngularJS 应用程序，作为其中的一部分，我们将版本号附加到经常更改的主应用程序 CSS 和 javascript 文件的查询字符串中。例如：

<link href="css/default.min.css?v=2" rel="stylesheet" />

服务器配置

在根 web.config 中，我们通过将 cache-control、Pragma 和 Expires 请求标头以及 max-age 设置为 0 来指定我们不想缓存 index.html。

<location path="index.html">
<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" />
  </staticContent>
    <httpProtocol>
        <customHeaders>
            <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
            <add name="Pragma" value="no-cache" />
            <add name="Expires" value="-1" />
        </customHeaders>
    </httpProtocol>  
</system.webServer>
</location>

参考资料：

IIS 客户端缓存：https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache 缓存控制 HTTP 标头：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control 杂注 HTTP 标头：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Pragma HTTP 标头过期：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires

【参考方案3】：

通过将content 值设置为0，浏览器将始终从网络服务器加载页面。

<meta http-equiv="expires" content="0">

【讨论】：

我应该在哪里设置上面提到的代码，index.html？

可以放在index.html文件头部w3schools.com/tags/tag_meta.asp

Expires 和 Pragma 已弃用并用于 HTTP/1.0。从多年前开始，它就不再需要了。

【参考方案4】：

您可以从未启用预加载的特定站点高级设置中指定 IIS。但是，您的网站性能将受到影响。还要检查特定网站的应用程序池是否已集成管道模式和 .NET CLR 版本。