为什么即使禁用了缓存，服务器也忽略代码文件中的更改？

14

我在本地主机（Windows 7，Chrome v79.0.3945.130（64位））上测试了html / js代码，并且大约50％的时间代码更改未反映在浏览器中（我可以通过Dev Tools / Sources查看） ）。
互联网上有很多建议，但似乎都行不通：

  • 右键单击重新加载，然后选择“清空高速缓存和硬重新加载”-在30％的情况下无济于事。
  • 在Chrome开发者工具的“网络”标签中禁用缓存-无效。
  • <meta http-equiv="Cache-control" content="no-cache">在标题中添加-没有帮助。
  • 替换<script src="common.js"></script>为<script src="common.js?blabla"></script>-在60％的情况下有帮助，但每次更改都是一件繁琐的事后，您需要这样做。此外，它不适用于html更改。
  • 将文件复制到新文件（如index.html到index2.html）并替换代码中的文件名-总是可以的，但要花很多时间。

当我将代码提交到github.io时，存在完全相同的问题

请帮助我做到这一点，以便该站点立即反映出代码更改。

编辑：我创建了一个文件index3.html，并只在其中放置“ hello world”。在浏览器中打开文件。更改为“ hello world2”-浏览器更新了内容。更改为“ hello world3”-即使多次重载和“空缓存和硬重载”后，浏览器仍显示“ hello world2”。我改为“ hello world4”-浏览器仍然显示“ hello world2”。在4个小时内，我更改为“ hello world5”-浏览器仍然显示“ hello world2”。我使用基本记事本编辑了此文件。

Edit2：人们一直在问我正在使用什么服务器。这看起来像是问题的一部分。不幸的是，我不知道，我也不知道我需要做什么来检查它。到目前为止，这是我发现的所有内容：

  • 我有inetpub/wwwroot放置html和js文件，然后在的浏览器中打开index.html的目录http://localhost/。
  • Devs Tools中的“我的网络”面板如下所示：image link。
  • 服务器设置非常快，不需要安装任何其他软件。即我不使用node.js。
  • inetpub/wwwroot当我打开iisstart.htm时，http://localhost/iisstart.htm它显示为IIS7。
javascript  html  server  browser-cache 
— klm123
source
我有时会在chrome开发工具中禁用缓存+刷新+再次启用缓存+刷新有时可以解决问题？可能值得一试...
— 尼克·帕森斯
2
您使用哪种服务器？
— 耶赫特
@Jhecht我如何检查？
— klm123
1
根据我在答案中看到的信息，您可能会使用参数来解决它。那可能会起作用。但是，当您在chrome开发工具中禁用缓存时，通常不需要这样做。所以我的预感是会涉及另一个缓存。您和服务器之间可能有许多其他的缓存技术。一些示例：服务器端缓存（例如Varnish），CDN缓存（例如Cloudflare），路由器/防火墙的本地代理（例如squid-cache）以及类似的东西。我也会检查那些。
— Jey DWork
1
@ klm123不知道这与哪个Web服务器有关，因此无法告诉您如何更改或检查其缓存配置。如果您不了解Web服务器，则可以通过devTools的网络选项卡检查它的一种可能方法：检查已加载的响应标头中index.html是否有诸如X-Powered-By或Server标头之类的内容，这些标头可能会提示Web服务器。谷歌搜索您的文件路径inetpub/wwwroot强烈指向IIS服务器。
— 阿克兰

Answers:

6

使用参数是正确的方法！在这里，您可以添加仅手动更改的版本号，并且可以将其设置为Date.time（）进行调试，以便在<head>标记中强制覆盖所有缓存的版本，因为该参数始终是新参数一：

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

希望这可以帮助！

— 莱姆罗
source
我想我能做到。但这与我的第四个选择是否有效？在文件名后添加“？blabla”。它并不经常工作-在“源”选项卡中它是相同的文件名，或者添加了blabla，但是文件的内容仍然相同。
— klm123
这是不一样的。一旦参数使用了两次（Date.time（）永远不会发生），它可能会呈现一个缓存的版本。？blabla在两次使用后和完全不使用后是相同的
— 。– lehm.ro
参数不使用两次。我编辑代码，然后更改参数，然后在浏览器中检查源代码，它是旧的。
— klm123
你尝试过我的方法吗？
— lehm.ro
您的方法会有所帮助，谢谢。但这不能解决我的问题。在我看来，你写的不是真的。“由于该参数始终是一个新参数，因此会强制覆盖所有缓存的版本”，将参数更改为新参数不会强制我的缓存可靠地重新加载。同样，它也无助于index.html中的更改。
— klm123
3

在Windows 7上运行的IIS7 Windows服务器中，为防止缓存内容，您需要对名为的配置文件进行一些更改web.config。对于IIS 7和更高的配置文件位于%WinDir%\System32\Inetsrv\Config folder其中%WinDir%是安装Windows（通常的文件夹C:/Windows）。

web.config在编辑文件之前，请先创建文件的备份副本，这样，如果对文件进行的更改会破坏该文件，则可以回滚到该文件。

在您的web.config文件中，只需添加以下内容以防止缓存index.html：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

web.config从此处获得文件的文件路径：Windows Doc：配置参考

从此处获得了上面的缓存的配置：如何禁用通过IIS服务的单页应用程序HTML文件的缓存？

— 安德鲁·L64
source
在上述路径下没有web.config。我已经创建了它，并将您的代码放在这里。但是我必须用完整的路径替换index.html，如projectName/index.html我从浏览器中的url复制的http:/localhost/projectName/index.html。结果-对缓存问题没有影响。
— klm123
@ kim123是否可以尝试将web.config文件添加到站点的根文件夹（站点所在的文件夹）中，然后将路径改回just index.html，看看是否可行。
— AndrewL64
我做到了 它没有帮助。
— klm123
1

我遇到了同样的问题，这是我的清单：

  1. 检查web.config（缓存和客户端缓存，内核缓存策略等）或.htaccess（标头设置缓存控制）。
  2. 如果使用ASP，PHP等动态语言，则可能会有内部缓存设置。在一种情况下，我发现<%Response.Expires=1440%>很多行ASP代码都可以克服所有其他设置！在php中session_cache_expire可能会做同样的事情。
  3. 如果您使用的是IIS，请检查服务器 > HTTP响应标头，以确保对于缓存在服务器名称下列出的各个网站也没有什么影响。
  4. 检http-equiv="Cache-control"入html标头（您已通过此测试！）。

最后，我不得不说，在上述所有情况下，检查Chrome控制台的newtwork选项卡中的Disable cache（禁用缓存）对我来说始终可以查看页面的新版本，但这仅用于调试目的，访问者不会这样做！

— 阿里·谢库普尔
source
1.在哪里可以找到web.config和.htaccess？2.我仅使用html和js。3. HTTP响应标头如下所示：imgur.com/leYpdej
— klm123
如果使用IIS，则web.congfig位于wwwroot的根目录中。Aslo在服务器级别有Machine.config文件，您可以从IIS控制台直接在此处进行修改：stackoverflow.com/questions/2325473/where-is-machine-config。如果您在Windows上使用apache服务器，请在Windows上搜索.htaccess @ klm123
— Ali Sheikhpour
0

在使用Google Chrome的特定情况下，请尝试以下操作：打开Dev Tools->转到“网络”标签。刷新页面后，选中“禁用缓存”复选框。

注意：为了使此功能每次都能运行，“开发工具”窗口必须始终保持打开状态。

在此处输入图片说明

但是，为了将更改传播给用户，而又无需他们硬刷新页面等，您必须在每个引用文件的末尾附加文件版本，以用于频繁更改的文件（正如您指出的那样）。例如：

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

该v=20b379f72a37追加到末尾是文件内容自动生成的文件的散列。

— 马丁·希什科夫（Martin Shishkov）
source
多数民众赞成在我的清单中的项目2。
— klm123
您确定“开发工具”窗口保持打开状态吗？
— Martin Shishkov
“开发工具”窗口打开，选中了复选框（但我通常查看“源”选项卡），甚至进行硬刷新。
— klm123
0

这是一个长镜头-但是您使用的是哪种编辑器/ IDE？另外，您要对index.html进行哪种编辑？

您能否提供一些这样的编辑示例，这些示例在您保存并尝试加载文件时没有体现出来？

我想尝试重现您的问题。从人们的建议来看，问题似乎不在代码本身之内。我怀疑这是环境问题，但我需要您提供更多信息以证实我的怀疑。

— 前座
source
我使用Microsoft Visual Studio代码。示例：将<script src =“ common.js”> </ script>替换为<script src =“ common.js？blabla”>。Example2：添加一个新按钮，添加一个新的div，添加onload函数调用。看起来像任何形式的编辑。
— klm123
请参阅问题帖末尾的修改内容。
— klm123
0

您在HTML meta中编写的内容是对浏览器的建议，而不是严格的说明。如果在浏览器中启用了严格缓存，这将无济于事。

解决方案描述得很好：https：//curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

我更喜欢在服务器端将脚本的最后更新日期添加到脚本中。

<script src="/myScript.js?v=1579780745150"></script>

其中1579780745150为Unix时间戳更新myScript.js文件本身。它仅适用于自己的文件，但不需要外部文件。文件名中最经常使用的是版本。

— 亚历山大·史密育（Aleksandr Smityukh）
source
如果您需要后端代码。告诉我您使用了哪个平台。
— Aleksandr Smityukh
0

这可能真的很令人沮丧，而且听起来好像您做错了什么。

问题可能出在浏览器和您正在调用的脚本文件之间进行某些缓存。

为了确定它是什么，让我问您如何浏览到本地主机URL？

例子：

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

如果您正在运行，file://path/to/file.html则意味着您没有浏览Web服务器/代理。如果是这样，http://[something]/file.html则说明您正在运行某种Web服务器，这很可能是罪魁祸首。寻找某种可以关闭缓存的设置。

如果您没有使用Web服务器，而实际上是在没有Web服务器的情况下直接浏览到本地html文件，那么我建议浏览器是罪魁祸首。如果是这种情况，我建议像Martin Shishkov建议的那样关闭浏览器缓存。

— 院长户主
source
这是http://localhost/ProjectName/index.html您可以关闭缓存的设置所在的位置？
— klm123
从您在其他地方发布的屏幕快照来看，您似乎正在使用IIS（也称为Microsoft的Internet信息服务）。一种快速的解决方案是双击.html文件以将其加载到浏览器中，该浏览器将使用file://path/to/projectName/index.html。这将从等式中删除Web服务器。要继续使用IIS和刚修好的高速缓存，请参阅这篇文章： support.microsoft.com/en-us/help/247404/...
— 迪恩户主
0

Chrome会在以下位置执行此操作：如果文件没有太大变化，则不确定其含义，它将使用“已编译”缓存版本。对于html来说，意味着解析了Don树。对于JS预编译代码等

通常有解决此问题的方法，许多框架在文件名中使用哈希，例如：main.md5hash.js，因为更改文件名会使所有缓存无效。

然后，您将剩下可能的html无法更新。需要明确的是，我不确定，您始终可以添加带有随机斑点的评论，例如日期。

— 阿克塞
source
0

根据您的答案的更新，我想说您的问题是由IIS v7 引起的，它使用PC 内存而不是本地硬盘驱动器来缓存，这就是原因，Hard reload并且所有其他方法似乎均无法正常工作。

我可以想到3个解决方案：

1.修复您的IIS缓存问题：（由于我没有配备IIS的PC，所以未经测试）

  1. 在“ 开始”菜单中，单击“ 管理工具”，然后单击“ Internet信息服务（IIS）管理器”。（参见图片）
  2. 在左侧的树视图中，找到您的应用程序。
  3. 选择输出缓存菜单项。
  4. 单击“ 添加缓存规则”，然后键入extension要在其上禁用缓存的文件，即.aspx.css，.js等...（我猜是一个吗？）
  5. 现在，您可以取消勾选用户模式缓存或选中阻止所有缓存。它看起来应该类似于：

在此处输入图片说明

解决方案源 -了解有关IIS 7缓存的更多信息

2.使用IIS的替代方法有很多，但我建议（根据我的经验）WAMP或XAMPP两者都将为您提供更好的开发“环境”，并且都支持Windows7。此外，如果您熟悉的话VS Code您可以只使用Live Server扩展。

3.开发时使用Chrome 隐身模式。（不确定是否适用于IIS7）

— awran5
source
添加缓存规则/阻止所有缓存-无济于事[尝试使用html]。隐身模式-无济于事。
— klm123
您是否尝试过.js文件？这取决于您所做的更改。
— awran5
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.