网站屏蔽中国大陆访客并弹窗提醒
基于某些情况下网站内容不适合中国大陆访客预览,我们可以使用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。
效果预览