如何编写Cloudflare Worker实现520错误时自动刷新页面？

核心思路 #

利用Cloudflare Worker拦截返回的520错误响应，通过返回带自动刷新逻辑的页面或修改响应头，触发浏览器自动重试加载。

方案一：返回带刷新提示的HTML页面 #

这种方式能给用户明确的反馈，避免困惑：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const response = await fetch(request)
  
  // 检测是否触发520错误
  if (response.status === 520) {
    // 生成自动刷新的HTML内容，3秒后重试当前页面
    const html = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>临时加载错误</title>
          <meta http-equiv="refresh" content="3; url=${request.url}">
          <style>
            body { text-align: center; padding: 60px; font-family: system-ui, sans-serif; }
            h1 { color: #e53e3e; font-size: 2.5em; }
            p { font-size: 1.1em; margin-top: 1.5em; }
          </style>
        </head>
        <body>
          <h1>520 页面加载出错</h1>
          <p>正在自动重试，请稍候...</p>
          <p>若未自动刷新，可<a href="${request.url}">手动点击重试</a></p>
        </body>
      </html>
    `
    // 返回正常状态码的响应，避免浏览器显示默认错误页
    return new Response(html, {
      headers: { 'Content-Type': 'text/html; charset=utf-8' }
    })
  }
  
  // 非520错误直接返回原响应
  return response
}

方案二：通过响应头静默触发刷新 #

这种方式更简洁，无额外页面内容：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const response = await fetch(request)
  
  if (response.status === 520) {
    // 复制原响应头，添加Refresh指令，2秒后刷新
    const headers = new Headers(response.headers)
    headers.set('Refresh', `2; url=${request.url}`)
    
    // 返回修改后的响应，可将状态码改为200避免浏览器报错提示
    return new Response(response.body, {
      status: 200,
      headers: headers
    })
  }
  
  return response
}

部署步骤 #

1. 登录Cloudflare控制台，进入目标域名的管理页面
2. 切换到「Workers」标签，点击「创建服务」
3. 选择「HTTP Handler」模板，将上述代码粘贴到编辑器
4. 点击「部署」后，在「触发器」标签添加路由，匹配你的预发布环境域名（如 staging.yourdomain.com/*）
5. 保存配置后，Worker即可生效

注意事项 #

• 刷新间隔建议设为2-5秒，避免频繁请求加重服务器负担
• 可添加重试次数限制：通过Cookie记录重试次数，超过5次则停止自动刷新，仅保留手动重试选项
• Worker只是临时缓解方案，若520错误频繁出现，建议联系共享主机提供商排查根源

内容的提问来源于stack exchange，提问作者Petrus Vermaak