Cloudflare Pages站点表单提交至Cloudflare Worker对接Slack/Webhook方案咨询

整个链路逻辑非常清晰，分三步落地即可：

第一步：前端表单适配 #

• 联系页直接写常规HTML表单，提交方法设为POST，提交地址填后续部署完成的Workers访问地址；也可以用JS写异步提交逻辑，避免表单提交后页面跳转，用户体验更好
• 表单新增一个隐藏的honeypot反垃圾字段，正常访问用户不会填写，Workers侧检测到该字段有值直接拒收请求，可拦截大部分垃圾提交
• 前端先做基础校验，比如必填项空值校验、邮箱格式校验，减少无效请求发到服务端

第二步：Cloudflare Workers 开发配置 #

直接新建Workers服务，核心逻辑只需要覆盖三个场景：

1. 处理OPTIONS预检请求，返回正确的CORS头，允许你的Pages域名跨域调用
2. 接收POST请求，解析表单数据，支持application/x-www-form-urlencoded或application/json格式，和前端提交格式对齐即可
3. 校验数据合法性，校验通过后组装消息格式，发送请求到Slack或第三方Webhook地址

核心代码参考：

export default {
  async fetch(request, env) {
    // CORS配置
    const corsHeaders = {
      'Access-Control-Allow-Origin': env.ALLOWED_ORIGIN,
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    }
    // 处理预检请求
    if (request.method === 'OPTIONS') {
      return new Response(null, { headers: corsHeaders })
    }
    // 仅允许POST请求
    if (request.method !== 'POST') {
      return new Response('Method not allowed', { status: 405, headers: corsHeaders })
    }
    try {
      const formData = await request.json()
      // 反垃圾校验
      if (formData.honeypot) {
        return new Response('Invalid submission', { status: 400, headers: corsHeaders })
      }
      // 组装Slack消息
      const slackMessage = {
        text: `新的联系表单提交：
姓名：${formData.name}
邮箱：${formData.email}
消息内容：${formData.message}`
      }
      // 调用Slack Webhook
      await fetch(env.SLACK_WEBHOOK_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(slackMessage)
      })
      return new Response(JSON.stringify({ success: true }), { 
        status: 200, 
        headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
      })
    } catch (e) {
      return new Response(JSON.stringify({ success: false, error: '提交失败，请稍后重试' }), { 
        status: 500, 
        headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
      })
    }
  }
}

上述代码中env.ALLOWED_ORIGIN填你的个人站域名，env.SLACK_WEBHOOK_URL填你在Slack后台生成的入站Webhook地址，两个配置都直接在Workers控制台的环境变量设置里添加即可，不需要硬编码到代码中。

代码调试完成后部署Workers，复制生成的Workers访问地址填到前端表单的提交地址即可。

第三步：功能扩展&优化 #

• 测试阶段覆盖正常提交、缺必填项、跨域请求等场景，确认Slack能正常接收消息
• 如果需要留存表单提交记录，不需要额外对接外部数据库，直接用Cloudflare自带的D1数据库或KV存储保存提交数据即可，后续做联系页管理后台直接读对应存储的数据
• 怕Webhook调用失败丢数据的话，可以加简单的重试逻辑，调用Webhook失败时先把数据存入KV，后续用Cloudflare Cron触发器定时处理未发送成功的请求

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