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

Question

我在我的本地主机（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。

Answer 1

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

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

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

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

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

---

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

---

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

Answer 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?

Answer 3

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

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

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

Answer 4

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

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

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

Answer 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。

Answer 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 文件本身。它仅适用于自己的文件，但不需要外部文件。文件名中最常见的是版本。

Answer 7

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

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

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

Answer 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>

希望这会有所帮助！

Answer 9

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

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

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

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

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