解决Vercel预览部署中Cloudflare Turnstile域名验证问题的工作流方案

方案1：使用Turnstile通配符允许域名

• 在Cloudflare Turnstile控制台的允许域名列表中添加*.vercel.app
• 优点：一次性配置完成，所有Vercel预览域名自动生效，无需额外操作
• 注意：仅适合内部团队使用，需严格保管Turnstile的站点密钥和密钥，避免被外部滥用

方案2：环境变量切换测试/正式Turnstile密钥

• 在Vercel中配置两组环境变量：
  • 生产环境：使用正式的Turnstile站点密钥(NEXT_PUBLIC_TURNSTILE_SITE_KEY)和密钥(TURNSTILE_SECRET_KEY)
  • 预览环境：使用Cloudflare官方提供的测试密钥（站点密钥：1x00000000000000000000AA，密钥：1x0000000000000000000000000000000AA）
• 代码中根据环境变量自动加载对应密钥，预览环境的Turnstile验证会跳过域名检查，但完整保留验证流程，不影响端到端测试的全流程覆盖
• 优点：彻底隔离测试与生产环境的验证逻辑，不会暴露正式密钥，测试流程和生产完全一致

方案3：自动化同步预览域名到Turnstile允许列表

• 借助Vercel部署钩子或CI/CD工具（如GitHub Actions）实现动态管理：
  1. 预览部署触发时，通过Vercel API获取当前预览域名
  2. 调用Cloudflare Turnstile的API，将该域名添加到允许列表
  3. 预览部署销毁或测试完成后，调用API移除该域名
• 示例GitHub Actions核心逻辑：

  - name: 添加预览域名到Turnstile允许列表
    run: |
      curl -X POST "https://api.cloudflare.com/client/v4/accounts/{你的账户ID}/turnstile/widgets/{你的Widget ID}/allowed_domains" \
        -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
        -H "Content-Type: application/json" \
        -d '{"domain": "${{ steps.get-preview-domain.outputs.domain }}"}'
  

• 优点：精准控制允许的预览域名，安全性高，适合对外公开的预览环境
• 注意：需提前配置拥有Turnstile域名管理权限的Cloudflare API令牌

内容的提问来源于stack exchange，提问作者Alex Flint