防止React spa应用程序中index.html的缓存

Question

我正在使用React作为前端，使用.net框架和IIS web服务器作为后端开发技术。我尝试了几种方法来防止IIS缓存index.html文件，但是它们并没有按照预期的方式工作，index.html文件仍然从磁盘缓存中提供。 以下是我所采取的步骤：

向index.html添加元标签：

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

在 Web 服务器的 web.config 文件中添加了规则：

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

以上的方法都对我无效。有什么想法吗？

谢谢回复...

- Ali Bayat Mokhtari

---

这个问题是在特定的浏览器中出现还是所有浏览器都一样？ - omid payandeh

@omidpayandeh Mozilla不会阻止缓存，并且它使用磁盘缓存而不是重新验证文件。 - Ali Bayat Mokhtari

Answer 1

可以尝试以下代码来防止缓存：

<location path="index.html">
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="DisableCache" />
        </staticContent>
    </system.webServer>
</location>

- Jalpa Panchal

---

我已经尝试了这个解决方案，在Chrome中完美地运行，但Mozilla仍然缓存了index.html文件并阻止重新验证。有什么想法吗？ - Ali Bayat Mokhtari

@AliBayatMokhtari 在得知您只在FF浏览器中遇到此问题后，我进行了测试。以下是您可以尝试的针对FF浏览器防止缓存的代码："<customHeaders><add name="cache-control" value="no-store" /></customHeaders>" - Jalpa Panchal

这是输出。 - Jalpa Panchal

很不幸，它没有起作用。我的 IIS Web 服务器版本是 10（我们必须支持 IIS 6 及更高版本），而 FF 版本是 112（Mac OS）。顺便说一下，感谢您花时间。 - Ali Bayat Mokhtari