angular - Angular IIS Cloudflare 缓存问题

Question

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

我看到的问题是，有时当应用程序更新时，浏览器会收到对index.html的304响应(即使它已经更改)，并且会从内存/磁盘缓存加载旧的index.html，并且然后尝试加载不再存在的包，这些包的响应是 200 并包含新的 index.html，浏览器将继续尝试作为 JS 运行并抛出错误。

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

奇怪的是，当网站更新时，访问host.com可能会返回新的index.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 中添加一条规则，以仅针对 index.html 禁用缓存，如下所示:

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

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

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