Question

我正在使用.Net core和angular 5创建一个网站。我使用最新的.Net核心角度模板创建了该项目（使用安装了.Net core 2.1的dotnet new angular）。

这个项目使用angular cli来构建/打包并将哈希应用到捆绑的js和css文件中：

然而，在将我的网站发布到azure app服务之后，我发现当我浏览网站时，我会看到旧版本，直到我用F5手动刷新（Ctrl-F5不是必需的）。这似乎是因为虽然js / css文件不会被缓存，但是包含对这些文件的引用的index.html页面将从缓存中提供。

当我按F5重新加载网站时，从网站请求index.html（下面的home）（在这种情况下为304，因为它没有改变，如果有的话，它将获得最新的）：

但是，当我最初加载页面时（通过书签或输入地址等），页面将直接从缓存中提供：

这是预期的行为吗？为什么第一次加载页面与按F5不同？我可以/我应该阻止这种缓存吗？

Answer 1

这不是一个完美或完美的解决方案，但这似乎奏效了，并且可能使人们走上正轨：

在Startup.cs的Configure（）中，我添加了这个

app.Use(async (c, next) =>
{
    if (c.Request.Path == "/")
    {
        c.Response.Headers.Add("Cache-Control", "no-store,no-cache");
        c.Response.Headers.Add("Pragma", "no-cache");
    }
    await next();
});

自添加此内容以来，我无法重现我的问题。

Answer 2

这是我结合了很多答案后得出的结论。我的目标是永远不要缓存index.html。当我在那里时，由于Angular很好地缓存了js和css文件，因此我将其缓存了所有其他资产一年。

只需确保对要在Angular之外管理的资产（例如图像）使用缓存清除机制即可。

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
  // ...
  app.UseStaticFiles();

  if (env.IsDevelopment())
  {
    // no caching
    app.UseSpaStaticFiles();
  }
  else
  {
    app.UseSpaStaticFiles(new StaticFileOptions
    {
      OnPrepareResponse = context =>
      {
        context.Context.Response.Headers.Add("Cache-Control", "max-age=31536000");
        context.Context.Response.Headers.Add("Expires", "31536000");
      }
    });
  }

  // ...

  app.UseSpa(spa =>
  {
    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
    {
      OnPrepareResponse = context =>
      {
        // never cache index.html
        if (context.File.Name == "index.html")
        {
          context.Context.Response.Headers.Add("Cache-Control", "no-cache, no-store");
          context.Context.Response.Headers.Add("Expires", "-1");
        }
      }
    };
  });
}

其他StackOverflow答案：Disable Caching in .Net Core | Cache for a year

Answer 3

我将以下行添加到index.html head部分，以防止缓存该文件：

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

缓存在.Net Core Angular 5网站中破坏index.html

3 个答案: