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

Posted 2023-02-26

【中文标题】为啥即使禁用缓存，服务器也会忽略代码文件中的更改？

【英文标题】：Why is server ignoring changes in the code files even though cache is disabled?为什么即使禁用缓存，服务器也会忽略代码文件中的更改？

【发布时间】：2020-04-19 01:44:51

【问题描述】：

我在我的本地主机（Windows 7，Chrome v79.0.3945.130（64 位））上测试了一个 html/js 代码，大约 50% 的时间代码更改没有反映在浏览器中（我在 Dev 中看到它）工具/来源）。 互联网上有很多建议，但似乎都没有：

右键单击重新加载并选择“空缓存和硬重新加载” - 在 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 文件和 然后在 http://localhost/ 的浏览器中打开 index.html。 我的开发工具中的网络面板如下所示：image link。 服务器设置非常快，不需要安装任何其他软件。 IE。我没有使用 node.js。 inetpub/wwwroot 有 iisstart.htm，当我打开 http://localhost/iisstart.htm 时，它显示的是 IIS7。

【问题讨论】：

我有时会发现在 chrome 开发工具中禁用缓存 + 刷新 + 再次启用缓存 + 刷新有时会解决问题？可能值得一试...

您使用的是什么类型的服务器？

@Jhecht 我如何检查它？

从我在答案中看到的情况来看，您可能会使用参数来解决它。这可能会奏效。但是，当您在 chrome 开发工具中禁用缓存时，通常不需要这样做。所以我的预感是涉及到另一个缓存。在您和服务器之间可以使用任意数量的附加缓存技术。几个例子：服务器端缓存（例如 Varnish）、CDN 缓存（例如 Cloudflare）、来自路由器/防火墙的本地代理（例如 squid-cache）和类似的东西。我也会检查这些。

@klm123 不知道这是关于哪个 Web 服务器，不可能告诉您如何更改或检查缓存配置。如果您不知道您的 Web 服务器，一种可能的检查方法是在 devTools 的网络选项卡中：检查加载的 index.html 的响应标头中是否有类似 X-Powered-By 或 Server 标头的内容，这可能会给网络服务器上的提示。谷歌搜索您的文件路径 inetpub/wwwroot 强烈指向 IIS 服务器。

【参考方案1】：

根据您的回答更新，我会说您的问题是由IIS v7 引起的，它使用您的 PC 内存 缓存而不是本地硬盘，这就是为什么 Hard reload 和所有其他方法似乎无法正常工作。

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

1.修复 IIS 缓存问题：（由于我没有带 IIS 的 PC，因此未测试）

从 开始 菜单中，单击 管理工具，然后单击 Internet 信息服务 (IIS) 管理器。 （见Images） 在左侧的树视图中，找到您的应用程序。 选择输出缓存菜单项。 单击添加缓存规则，然后键入文件extensions，您想在它们上禁用缓存，即.aspx、.css、.js 等...（一次一个我猜？） 现在，您可以取消勾选用户模式缓存或勾选阻止所有缓存。它应该类似于：

Solution Source - 了解更多关于IIS 7 Cache

---

2。使用 IIS 的一些替代品 有很多，但我建议（根据我的经验）WAMP 或 XAMPP 两者都会为您提供更好的开发“环境”并且都支持 Windows 7。另外，如果您熟悉VS Code，则可以使用Live Server 扩展名。

---

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

【讨论】：

添加缓存规则/防止所有缓存 - 没有帮助[尝试使用 html]。隐身模式 - 没有帮助。

你试过.js文件吗？这取决于你做了什么改变。

【参考方案2】：

在 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: Configuration Reference

从这里获取上面缓存的配置：How to disable caching of single page application HTML file served through IIS?

【讨论】：

上述路径中没有 web.config。我已经创建了它并将您的代码放在那里。但我不得不用完整路径替换 index.html，如 projectName/index.html，我从浏览器中的 url 复制 http:/localhost/projectName/index.html。结果 - 对缓存问题没有影响。

@kim123 您能否尝试将web.config 文件添加到您网站的根文件夹（您的网站所在的文件夹）中，然后将路径更改回index.html，看看是否可行.

我做到了。它没有帮助。

【参考方案3】：

我有同样的问题，这是我的清单：

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

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

【讨论】：

1.我在哪里可以找到 web.config 和 .htaccess？ 2.我只使用html和js。 3. HTTP 响应头看起来像这样：imgur.com/leYpdej

如果您使用的是 IIS，则 web.congfig 位于 root ot wwwroot 中。此外，服务器级别有 Machine.config 文件，您可以直接从 IIS 控制台修改它：***.com/questions/2325473/where-is-machine-config。如果您在 windows 上使用 apache 服务器，请搜索 windows 以找到 .htaccess @klm123

【参考方案4】：

Chrome 会这样做，如果文件没有太大变化，不确定它的含义，它将使用“已编译”缓存版本。对于 html，它意味着解析的唐树。对于JS预编译代码等

通常有办法解决这个问题，许多框架在文件名中使用哈希，例如：main.md5hash.js，因为更改文件名会使任何缓存失效。

那么你可能会留下没有更新的html。需要明确的是，我不确定，您可以随时添加带有随机 blob 的评论......就像日期一样。

【参考方案5】：

这可能真的很令人沮丧，而且听起来你并没有做错什么。

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

要确定它是什么，让我问一下您是如何浏览到 localhost 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，这意味着您没有通过网络服务器/代理进行浏览。如果是http://[something]/file.html，那么您正在运行某种网络服务器，这很可能是罪魁祸首。寻找某种可以关闭缓存的设置。

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

【讨论】：

是http://localhost/ProjectName/index.html 这个可以关闭缓存的设置在哪里？

从您在别处发布的屏幕截图看来，您正在使用 IIS（也称为 Microsoft 的 Internet 信息服务）。一个快速的解决方案是双击您的 .html 文件以将其加载到浏览器中，该浏览器将使用 file://path/to/projectName/index.html。这将从等式中删除 Web 服务器。要继续使用 IIS 并仅修复缓存，请参阅这篇文章：support.microsoft.com/en-us/help/247404/…

【参考方案6】：

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

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

我更喜欢在服务器端将带有文件本身最后更新日期的版本添加到脚本中。

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

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

【讨论】：

如果你需要后端的代码。告诉我您使用的是哪个平台。

【参考方案7】：

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

您能否提供一些在您保存并尝试加载文件时未反映的此类编辑示例？

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

【讨论】：

我使用 microsoft Visual Studio 代码。示例：将 替换为

【参考方案8】：

使用参数是正确的方法！在这里，您可以添加一个版本号，您只能手动更改较大的更改，并且为了调试，您可以将其设置为 Date.time() 因此在您的

标记中，这会强制覆盖所有缓存的版本，因为参数始终是新的一：

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

希望这会有所帮助！

【讨论】：

我想我能做到。但它与我的第四个选项实际上不一样吗？在文件名后添加“?blabla”。它不经常工作 - 它要么是 Sources 选项卡中的相同文件名，要么添加了 blabla，但文件的内容仍然相同。

不一样。一旦一个参数被使用了两次（这永远不会发生在 Date.time() 中，它可能会呈现一个缓存版本。使用它两次后的 ?blabla 与根本不使用它是一样的。

参数不使用两次。我编辑代码，然后更改参数，然后在浏览器中查看源代码，它是旧的。

您的方法有帮助，谢谢。但这并不能解决我的问题。你写的在我的情况下是不正确的。 “强制覆盖所有缓存版本，因为参数始终是新的”，将参数更改为新参数不会强制我的缓存可靠地重新加载。它也不能帮助改变 index.html。

【参考方案9】：

在使用谷歌浏览器的特定情况下，试试这个： 打开开发工具 -> 转到“网络”选项卡。选中“禁用缓存”复选框，然后刷新页面。

注意：为了在每次 Dev Tools 窗口时都能正常工作 始终保持开放。

但是，为了将更改传播给您的用户，而不是让他们硬刷新页面等，您必须在每个引用文件的末尾附加文件版本以获取频繁更改的文件（正如您所指出的） . 例如：

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

附加到末尾的v=20b379f72a37 是文件内容的自动生成的文件哈希。

【讨论】：

这是我列表中的第 2 项。

您是否确保开发工具窗口保持打开状态？

开发工具窗口打开，复选框被选中[但我通常查看源选项卡]，我什至硬刷新。