如何强制 nginx 重新加载客户端的浏览器以更改内容？答案

【问题标题】：How to force nginx to reload client's browser for content change?如何强制 nginx 重新加载客户端的浏览器以更改内容？
【发布时间】：2019-08-14 14:46:47
【问题描述】：

我有一个非常简单的设置，但我目前还无法实现最终目标。我在提供静态 html 页面的 VM 上安装了 nginx。此 html 页面包含我要循环播放的视频的代码。我希望能够替换视频目录中的视频文件，并让 nginx 强制显示旧视频的客户端浏览器重新加载并开始播放新文件，而无需重新启动 nginx 或手动刷新浏览器。我应该提到客户端浏览器位于显示视频的电视上，我不想手动刷新电视上的浏览器并自动完成。

我通过四处搜索找到了一些元标记以使其工作，但它对我不起作用。该页面提供旧视频，并且在一个小时后不刷新（我在元标记中指定的值）。

<!DOCTYPE html>
<html>
<head>
<title>my video</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="refresh" content="3600">
<style>
    body {
        position: absolute;
            overflow: hidden;
            width: 100%;
            height: 100%;
    }

    #myvideo {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
    <!-- The video -->
    <video autoplay muted loop id="myvideo">
        <source src="videos/main.mp4" type="video/mp4">
    </video>
</body>
</html>

我将不同的视频上传到具有相同名称“main.mp4”的视频目录，并希望 nginx 强制浏览器重新加载并显示更新的视频。

【问题讨论】：

标签： html nginx html5-video browser-cache

【解决方案1】：

需要检查/记住的几件事：

虽然<meta http-equiv="refresh" content="3600"> 应该可以正常工作，但一些（非常罕见的）浏览器可能不支持它。在这种情况下，您可以尝试添加基于 Javascript 的解决方案，例如：

<script>
setTimeout(function() { window.location.reload(true); }, 60*60*1000);
</script>

true 将确保在重新加载页面时，浏览器将跳过其缓存并从服务器加载页面。

由于您的页面在内部使用/链接到相同的视频文件名，因此您必须确保 http://example.com/videos/main.mp4 没有正缓存标头。

您可以使用curl 来检查标题，如下所示：

curl -IL http://example.com/videos/main.mp4

查看Cache-Control 和Expires 的值是多少。您可以同时拥有这两个标头，也可以拥有其中任何一个标头。对于您的情况，它们应该规定不到一小时的可缓存性或根本没有。

在 NGINX 中你可以这样设置：

location = /videos/main.mp4 {
    expires -1;
}

这基本上告诉它在获取视频文件的时间后 1 秒后发送过期时间（= 无缓存）。

【讨论】：

谢谢@Danila Vershinin。其他几个问题： 1- 我将脚本放在 HTML 的头部还是正文中？ 2- 我需要保留我已经拥有的 4 个meta 标签吗？ 3- 当我运行curl 命令时，我没有看到Cache-Control 和Expires 的任何内容，这是应该的吗？ ``` HTTP/1.1 302 临时移动服务器：nginx/1.14.0 (Ubuntu) 日期：2019 年 8 月 15 日星期四 16:11:07 GMT 内容类型：文本/html 内容长度：170 连接：保持活动位置：example.com/videos/main.mp4 curl：（35）错误：1400442E：SSL 例程：CONNECT_CR_SRVR_HELLO：tlsv1 警报协议版本```
您可以保留元标记。 Javascript 可以添加到<head>。针对视频文件 URL 的最终（可能是 https://）版本发出 curl 请求，这不会导致重定向。
当我对 https 运行 curl 时，我收到一个 SSL 错误“curl -IL example.com/videos/main.mp4 curl: (35) error:1400442E:SSL routines:CONNECT_CR_SRVR_HELLO:tlsv1 alert protocol version”另外，我们提出的这种方法，不需要手动刷新或重新加载客户端的浏览器，对吗？上传并替换 main.mp4 后，它会每 60 分钟自动刷新一次，无需用户干预？
是的，无需用户干预。您似乎无法确定视频的最终 URL？ curl test 命令应该返回 200 状态，而不是重定向，也不是失败。如果您没有将视频链接为 https://（也不是页面），那么它不能通过 https 使用，并且无法测试。显然，将example.com 替换为您自己的域。

【解决方案2】：

另一种选择是使用Refresh HTTP 标头：

    location = /chart.auto.png {    
        alias /run/data/chart.png;
        add_header Refresh "5; url=https://example.com/chart.auto.png";
    }

此标头使浏览器要么刷新此 URL，要么可能在 5 秒后转到另一个 URL。

这适用于任何类型的内容（不仅是 HTML 页面），如示例所示。

虽然这可能工作正常，但仍建议禁用您提供的对象的缓存：

    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache';
    if_modified_since off;
    expires off;
    etag off;

【讨论】：