基于某些情况下网站内容不适合中国大陆访客预览,我们可以使用Cloudflare实现“对中国大陆用户屏蔽内容并显示弹窗”,最优雅且高效的方式是利用 Cloudflare 的 WAF (Web Application Firewall) 规则结合 Custom Pages 或 Workers。

使用 Cloudflare Workers (推荐,体验最平滑)

这种方法可以直接在边缘节点修改 HTML,给中国大陆用户注入一段 CSS 和 JavaScript,从而实现“背景模糊+弹窗提示”的效果,而海外用户完全无感。

找到创建入口

请在首页左侧菜单栏中寻找 Workers & Pages(通常在最下方或者点击底部的 “All Domains” 回到主控制面板后能看到)。

如果你在当前域名配置页找不到,请按以下步骤操作:

点击左上角的 Cloudflare Logo 回到主页。

在左侧大菜单里找到 Workers & Pages。

点击 Create Application -> Create Worker。

给它随便起个名字(比如 block-cn-users),点击 Deploy。

编写逻辑代码

部署完成后,点击 Edit Code,将左侧默认的代码全部删掉,粘贴下面这段:

export default {
async fetch(request, env, ctx) {
const response = await fetch(request);
// 获取访问者的国家代码
const country = request.cf.country;

// 如果是中国大陆用户 (CN)
if (country === 'CN') {
  const contentType = response.headers.get('content-type');
  
  // 只拦截 HTML 页面,不影响图片、JS/CSS 等静态资源加载,减少服务器压力
  if (contentType && contentType.includes('text/html')) {
    let body = await response.text();
    
    // 注入高逼格的模糊滤镜和弹窗
    const injection = `
      <style>
        /* 模糊网站背景 */
        html, body { 
          overflow: hidden !important; 
          height: 100% !important;
        }
        #app-container, #page, .site { 
          filter: blur(15px); 
          pointer-events: none; 
        }
        /* 弹窗样式 */
        .custom-modal {
          position: fixed; top: 0; left: 0; width: 100%; height: 100%;
          background: rgba(255,255,255,0.7); backdrop-filter: blur(5px);
          display: flex; align-items: center; justify-content: center; z-index: 9999999;
        }
        .modal-content {
          background: #fff; padding: 40px; border-radius: 20px; text-align: center;
          box-shadow: 0 20px 40px rgba(0,0,0,0.1); max-width: 400px; font-family: -apple-system, sans-serif;
        }
        h2 { color: #1d1d1f; margin-bottom: 15px; }
        p { color: #86868b; line-height: 1.5; }
      </style>
      <div class="custom-modal">
        <div class="modal-content">
          <h2>提示</h2>
          <p>很抱歉,由于业务调整,本网站暂不对您所在的地区提供预览支持。</p>
          <p style="font-size: 13px; margin-top: 20px;">Limited access from your region.</p>
        </div>
      </div>
    `;
    
    // 在 <body> 标签结束前注入
    body = body.replace('</body>', `${injection}</body>`);
    return new Response(body, response);
  }
}

return response;

}
};

点击右上角的 Save and Deploy。

绑定到你的域名(很重要哦)

代码部署好了,现在要告诉 Cloudflare 哪个域名用这个代码:

回到你刚才看 DNS、SSL 的那个域名管理界面。

点击左侧菜单的 Workers Routes。

点击 Add route。

Route 填写:你的域名.com/* (例如 example.com/*)。

Worker 选择你刚才创建的那个(比如 block-cn-users)。

点击 Save。

效果预览