每次从服务器加载index.html而不是从缓存加载

61

我有一个名为index.html的网页,托管在特定服务器上。我将example.com指向了example.com/index.html。因此,当我对index.html进行更改并保存后,尝试打开example.com时,更改不会反映出来。原因是网页被缓存了。

然后我手动刷新页面,因为它加载新的副本而不是从缓存中提取,这样就可以正常工作。但我不能要求我的客户这样做,他们希望一切都完美无缺。所以我的问题是,有没有什么技巧或技术可以使文件每次都从服务器加载而不是从缓存中加载?

P.S:我知道CSS、JS和图片文件的技巧,即添加?v=1,但不知道如何对index.html执行此操作。

任何帮助将不胜感激。谢谢!


4
可能的答案 https://dev59.com/6nM_5IYBdhLWcg3whznx#1341133 - lostsource
8个回答

62

通过这个:

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

将内容设置为“0”告诉浏览器始终从 Web 服务器加载页面。


我也遇到了这个问题,对于某些系统的某些条件仍不清楚,在这些系统上我仍然看到缓存版本的服务。 这是否足以始终确保 index.html 不会被缓存,还是还需要一些服务器端设置? - ddewaele
我认为旧的缓存版本需要先过期。 - Victor Queiroz
3
请考虑将常识融入解决方案中。请对文件进行服务和缓存,并在文件被修改时替换缓存版本。请注意,检查修改日期的成本非常低。您的解决方案类似于拔掉网络电缆来解决网络安全问题。 - Rick O'Shea
3
@RickO'Shea,话虽如此,但Doniyor已经完美回答了这个问题。另一个问题是是否有理由防止典型的缓存策略。 - karns

10
标签对我没用,所以我从实现过滤器或控制器的Java类中设置了头部。然后它起作用了。这是代码

meta标签没有起到效果,所以我在实现过滤器或控制器的Java类中设置了头信息,这样就生效了。下面是代码:

HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1
httpResponse.setHeader("Pragma", "no-cache"); // HTTP 1.0
httpResponse.setDateHeader("Expires", 0); // Proxies.

6

截至2018年,只有两种最可靠的方法可用

1) **<meta http-equiv="expires" content="0">** 使用此元标记,但要小心,因为该标记会在网页由浏览器处理时破坏页面的所有缓存。

2) 为每个页面请求在服务器上生成一个唯一的ID,并将此ID附加到HTML文档中所有文件名的末尾,在需要从服务器加载的图像、文档、CSS/JS文件、视频等文件末尾添加一个?。例如,如果您的HTML标记如下:<img src="images/profile223.jpg" alt="profile picture">则在服务器端将唯一的ID附加到文件名的末尾,如下所示:echo '<img src="images/profile223.jpg?'.$uniqueid.'"" alt="profile picture">';。在这个例子中,我使用php,但你可以在任何语言上生成唯一的ID。所有大公司,如Google、Facebook、Microsoft、Twitter等都使用这种技术,因为它是最有效的方式,不会影响你想要存储在用户浏览器上的缓存数据,如登录会话ID。这种技术跨浏览器兼容,并支持IE、Firefox、Chrome、Safari和Opera的旧版本。您也可以使用相同的技术将唯一ID附加到URL的末尾。


19
如果 index.html 被缓存了,那么客户端将会使用旧的 URL 来请求带有之前的“?uniqueId”的静态资源。 - Josh J

3
您可以尝试以下方法。这对我有效。
请在您的.htaccess文件中添加以下代码行。
<IfModule mod_headers.c>

    <FilesMatch "\.(html|php)$">
        Header set Cache-Control "no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires 0
    </FilesMatch>

    <FilesMatch "\.(ico|pdf|jpg|png|gif|js|css)$">
        Header set Cache-Control "max-age=172800, public, must-revalidate"
    </FilesMatch>

</IfModule>

如果您使用以上代码,浏览器将不会缓存.html文件。

2
在头部添加这些元标签可适用于大多数浏览器(在这种情况下,index.html 不会被缓存):
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

有些晚了,但希望能对其他人有所帮助!

1

您可以发送附加标头与文件一起,告诉客户端(即浏览器),文件不得被缓存。如果您使用Apache,请查看mod_expires。如果您使用服务器端脚本语言(如PHP),也可以使用它来解决这个问题。


我不确定服务器的情况。我的Web应用程序托管在完全不同的服务器上(AWS EC2),而index.html页面,我只被授权更改内容,不知道它使用哪个服务器等。但是正如Doniyor建议的那样,元标记解决了问题。感谢您的时间 :) - Pulkit Mittal

1
我强烈建议不要使用元标签,而是像Murali Krishna Bellamkonda发布的那样使用.htaccess。这将始终是最好的和最安全可靠的方式。您可以微调整个系统以使其保持缓存长时间,定期刷新文件等等...... 不要一次性尝试所有元标签,看看会发生什么!(不,我不会这样做)请查看Header set Cache-Control“max-age = 5,immutable”与ExpiresDefault A5的无缓存选项。

0

我曾在我的网站上遇到过这个问题。在您的URL中添加q=''。

http://yoururl.com/somelinks?q=fill_with_random_number

对我来说,它起作用了


我不确定,但我认为是因为浏览器会将其视为新的URL,因此它不会使用之前缓存的URL。 - ahr
在问号后添加随机字符串被称为“加盐”URL。Ahr所说的是正确的。服务器和浏览器都将其视为新的URL(因为它是唯一的),因此它会绕过两个缓存。URL中的问号告诉浏览器和服务器,您正在向服务器发送GET变量。在“?”之后,您可以放置任何要发送的文本,并每次创建一个唯一的URL。由于URL是唯一的,因此在服务器或浏览器缓存中不会有缓存记录。当没有记录时,服务器被迫提供页面的最新版本。 - craig
另外需要注意的是- 它不必是'q'和一个随机数。它可以是'?1234'或'?h=asbad'。如果您的URL中已经有问号,则请改用'&'。例如,'http://example.com/?x=1' 可以更改为 'http://example.com/?x=1&123459asx',其中'&123459asx' 是我传递的随机字符串。 - craig

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接