Nginx 缓存的 index.html 强制刷新

Question

在服务器迁移过程中，新的nginx配置缺少了缓存控制指令。因此，我们得到了一个缓存的index.html文件，这对于我们的SPA来说非常糟糕，如果我们部署了新代码，它将不再刷新。我们需要使index.html不被缓存。

以下是我们（糟糕的）在线nginx配置几天的内容：

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

我们修复了配置文件：

server {
  listen 80;

  root /usr/share/nginx/html;

  location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
  }

  location ~* \.(js|jpg|jpeg|gif|png|svg|css)$ {
    add_header Cache-Control "max-age=31536000, public";
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

问题

在过去的几天内访问我们网页的客户端缓存了旧的 index.html。我们如何强制他们的浏览器放弃缓存的 index.html？

- Stuck

Answer 1

用户（浏览器）在客户端未向服务器请求新内容时，无法手动重置浏览器缓存。在这种情况下，可以访问任何脚本，以便您的SPA在没有缓存的情况下下载。然后，您可以更改此脚本并强制重新加载页面（但请小心-您需要任何标志来防止每次加载页面后永久强制重新加载）。例如，如果您的网站上有GTM，则可以使用它来帮助。

更新：我不是JS专家，但您需要在所有页面上添加类似于此JS脚本的GTM标签：

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

was_reloaded = getCookie('was_reloaded')
alert(was_reloaded)
if (was_reloaded != 'yes') {
        document.cookie = "was_reloaded=yes; path=/; max-age=3600;"
    location.reload();
} }

- Talkerbox

---

我们确实使用GTM，您能详细说明如何利用它强制重新加载仅旧版本吗？ - Stuck

@Stuck 我已经更新了答案并提供了示例。希望这能帮到你。 - Talkerbox