Cloudflare 就是神，不接受反驳#

Cloudflare 就是神，不接受反驳

创建 Turnstile 组件#

进入 Cloudflare Turnstile 官网，创建组件

NOTE
配置建议：

模式：Managed

域名：你的站点域名

预先许可（Cookie）：关闭（我们自己控制）

创建完成之后可以看到页面跳转，得到两个值

Site Key（前端用）
Secret Key（服务端用）

在 Pages 中配置 Secret Key#

NOTE

Name: TURNSTILE_SECRET（一个字母都不能变）

Value: xxxxxxxx（Secret Key）

创建 gate 页面（前端）#

新建文件：

1
src/pages/gate.astro

这是一个 自动检测 token → 自动跳转 的代码（YOUR_SITE_KEY自行修改）：

1
---
2
const siteKey = "YOUR_SITE_KEY";
3
const next = Astro.url.searchParams.get("next") ?? "/";
4
---
5

6
<!doctype html>
7
<html lang="zh-CN">
8
  <head>
9
    <meta charset="utf-8" />
10
    <meta name="viewport" content="width=device-width,initial-scale=1" />
11
    <title>Human verification</title>
12
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
13
  </head>
14

15
  <body class="gate">
16
    <main class="card">
17
      <h1>正在验证</h1>
18
      <p class="desc">正常用户将自动通过，请稍候…</p>
19
      <div class="cf-turnstile" data-sitekey={siteKey}></div>
20
    </main>
21

22
    <script define:vars={{ next }}>
23
      const timer = setInterval(async () => {
24
        const tokenEl = document.querySelector(
25
          'input[name="cf-turnstile-response"]'
26
        );
27
        const token = tokenEl?.value;
28
        if (!token) return;
29

30
        clearInterval(timer);
31

32
        const res = await fetch("/api/turnstile-verify", {
33
          method: "POST",
34
          headers: { "content-type": "application/json" },
35
          body: JSON.stringify({ token, next }),
36
        });
37

38
        if (res.ok) {
39
          const data = await res.json();
40
          location.replace(data.redirect || "/");
41
        }
42
      }, 400);
43
    </script>
44
  </body>
45
</html>

服务端校验 Turnstile（Pages Functions）#

新建文件（ functions 文件夹在根目录下自行创建）：

1
functions/api/turnstile-verify.ts

1
// @ts-nocheck
2

3
export const onRequestPost = async (ctx) => {
4
  const { token, next } = await ctx.request.json().catch(() => ({}));
5

6
  if (!token) {
7
    return new Response("missing token", { status: 400 });
8
  }
9

10
  const form = new FormData();
11
  form.append("secret", ctx.env.TURNSTILE_SECRET);
12
  form.append("response", token);
13

14
  const ip = ctx.request.headers.get("CF-Connecting-IP");
15
  if (ip) form.append("remoteip", ip);
16

17
  const verify = await fetch(
18
    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
19
    {
20
      method: "POST",
21
      body: form,
22
    }
23
  );
24

25
  const result = await verify.json();
26
  if (!result.success) {
27
    return new Response("verification failed", { status: 403 });
28
  }
29

30
  const redirect =
31
    typeof next === "string" && next.startsWith("/") ? next : "/";
32

33
  const cookie =
34
    "cf_human=1; Path=/; Max-Age=43200; HttpOnly; Secure; SameSite=Lax";
35

36
  return new Response(JSON.stringify({ redirect }), {
37
    headers: {
38
      "content-type": "application/json",
39
      "set-cookie": cookie,
40
    },
41
  });
42
};

全站拦截（Middleware）#

新建文件：

1
functions/_middleware.ts

1
// @ts-nocheck
2

3
export const onRequest = async (ctx) => {
4
  const url = new URL(ctx.request.url);
5
  const path = url.pathname;
6

7
  if (
8
    path.startsWith("/gate") ||
9
    path.startsWith("/api/turnstile-verify") ||
10
    path.startsWith("/_astro/") ||
11
    path.startsWith("/assets/") ||
12
    path.startsWith("/favicon")
13
  ) {
14
    return ctx.next();
15
  }
16

17
  const cookie = ctx.request.headers.get("Cookie") || "";
18
  const passed = /(?:^|;\s*)cf_human=1(?:;|$)/.test(cookie);
19

20
  if (!passed) {
21
    const next = encodeURIComponent(path + url.search);
22
    return Response.redirect(`${url.origin}/gate?next=${next}`, 302);
23
  }
24

25
  return ctx.next();
26
};

部署与测试#

将修改后的代码 push 到 github

测试流程#

无痕窗口访问首页 → 自动跳 /gate
正常浏览器 → 页面一闪直接回首页
VPN / 异常环境 → 出现 Turnstile 勾选
验证成功后：
- Cookie：cf_human=1
- 12 小时内全站免验证