缓存问题 Angular IIS Cloudflare

Question

我有一个带有路由的 angular 6 应用程序，它是使用 angular cli 构建并在 IIS 上提供的，配置非常基本，设置了 url 重写，以便页面刷新工作等。

我看到的问题是，有时当应用程序更新时，浏览器会获得索引的 304 响应.html(即使它已更改(并将从内存/磁盘缓存加载旧索引.html然后尝试加载不再存在的捆绑包，这些捆绑包的响应是 200 并包含新索引.html浏览器继续尝试以 JS 形式运行并抛出错误。

在 web.config 中禁用缓存以进行故障排除没有任何效果，因为 304 似乎优先。

奇怪的是，当网站更新访问时 host.com 可能会返回新索引.html并且访问时一切都很好 host.com/login 可能会返回 304 并导致问题。这因浏览器而异，有些浏览器做同样的事情，但方式相反。

请求通过 cloudflare，我无法控制其配置(其他人为客户端管理此配置(。Cloudflare可能是问题所在，还是更可能是我的IIS配置中的某些问题？

这是当前的web.config：

<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="api rule" stopProcessing="true">
<match url="api/(.*)" />
<action type="Rewrite" url="http://localhost:8080/{R:0}" />
</rule>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{QUERY_STRING}" pattern="/api/(.*)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
</system.webServer>
</configuration>

Answer 1

我最终做的是在我的 web.config 中添加一个规则来禁用索引的缓存.html如下所示：

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

似乎已经解决了这个问题，捆绑包仍然被缓存，但是当我们部署新版本时，客户端总是会获得最新的索引.html因此指向正确的捆绑包。可能有更好的方法。

这似乎只是在访问网站后快速发生 url 重写时才是一个问题，也许是一些竞争条件？，即主页是/login，所以访问 host.com/login 它总是没问题并且可以获得最新的索引.html，但访问 host.com 会导致缓存索引.html然后角度路由器立即重定向到/login， 然后发出另一个请求，URL 重写返回 304。仍然不完全确定发生了什么，但禁用索引缓存.html现在已经解决了这个问题。

Answer 2

我遇到了完全相同的问题。 对我来说，我在 web.config 中设置静态内容的缓存信息，但它也应用于索引.html。 您可能依赖于 Cloudflare 缓存规则 - 看看他们是否可以添加规则，以便索引.html不会被缓存(或缓存很短的时间(。