502 Bad Gateway 错误时自动刷新页面答案

【问题标题】：Automatically refresh page on 502 Bad Gateway error502 Bad Gateway 错误时自动刷新页面
【发布时间】：2017-07-24 07:00:40
【问题描述】：

当我对我的站点进行维护并重新启动服务器时，NGINX 有时会返回 502 Bad Gateway 错误。同样的事情有时会在重负载下发生。这让我的访客感到困惑，他们没有意识到这个问题可能是暂时的。有什么方法可以让访问者在网站返回时自动刷新页面？

【问题讨论】：

标签： javascript http nginx

【解决方案1】：

您可以通过使用 Javascript 检查当前页面的 HTTP 状态码，并在服务器备份时刷新页面（即返回200 OK 状态码）来实现此目的。当许多用户同时遇到502 错误页面时，为了避免锤击服务器，我建议使用truncated binary exponential backoff 算法。这意味着每次重试之间的时间都会加倍，直到达到预设的最大值，从而降低服务器的整体负载。

下面的代码通过 AJAX 检查当前页面的 HTTP 状态，直到它返回 200 OK，在这种情况下，它将刷新页面以获取实时版本。如果遇到502，它将尝试重试，从 8 秒间隔开始，然后 16、32、...、4096 秒，然后以 4096 秒间隔（约 68 分钟）无限次重试。如果遇到除502 或200 之外的任何代码，重试过程将静默中止（但如果需要，您可以使用更多case 语句更改此设置）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Currently unavailable</title>
</head>
<body>
  <h1>Site currently unavailable (code 502)</h1>

  <p>This page will refresh when the site is back.</p>

  <noscript>Your browser doesn’t support javascript. Please try refreshing the page manually every few minutes.</noscript>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
  /* Set starting and maximum retry times in seconds */
  var retry_current = 8, // first refresh at 8 seconds
      retry_max = 4096, // refresh time truncated at about 68 minutes
      check_response = function() {
      $.ajax(
          {
              url: window.location.href,
              type: "HEAD",
              complete: function (jqXHR) {
                  switch (jqXHR.status) {
                      case 200:
                          window.location.reload(true);
                          break;
                      case 502:
                          if(retry_current < retry_max) {
                              retry_current *= 2;
                          }
                          setTimeout(check_response, retry_current * 1000);
                  }
              }
          });
      };
    setTimeout(check_response, retry_current * 1000);
    </script>
</body>
</html>

如果您使用的是 nginx，可以在配置文件中添加以下内容以使用该页面：

error_page 502 /502.html;
location = /502.html {
  alias /path/to/502.html;
}

【讨论】：

我是 Ajax 的新手，但我面临着类似的情况，即我网站上的页面随机超时并出现 500.0 错误。刷新总是会成功重新启动页面，我想只在该特定页面上使用 ajax/javascript 来做到这一点。上面是否为网站上的所有 502 错误提供了代码（代码是仅放置在特定的有问题的网页上，还是更多的站点范围的解决方案）？让我感到困惑的是头部和正文中的描述性语言“此页面将刷新...”和“站点当前不可用”表明这是一个独立页面。
如果这是一个由配置页面引用的独立页面，而不仅仅是特定页面，是否会使用该语言？感谢您的帮助。