Supabase Edge函数触发两次但仅调用一次的问题求助

1. 优先排查CORS预检请求（OPTIONS）问题 #

浏览器发送POST这类跨域请求前，会自动发送一次OPTIONS预检请求，确认服务器允许跨域。你的当前函数没有对OPTIONS请求做特殊处理，导致预检请求也会完整执行一遍查询逻辑，最终出现两次函数日志。

解决方法：在函数开头添加OPTIONS请求判断，直接返回CORS头，不执行后续数据库查询：

serve(async (_req) => {
  // 先处理OPTIONS预检请求
  if (_req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders })
  }

  // 原有的业务逻辑代码...
})

2. 检查按钮事件是否重复绑定 #

虽然浏览器控制台只打印了一次Called invokeFunction，但仍需确认事件绑定是否重复：

• 检查HTML中是否存在多个相同ID的按钮，或者脚本是否被多次加载
• 可以修改事件绑定代码，添加once: true确保只触发一次：

document.getElementById('invoke-button').addEventListener('click', invokeFunction, { once: true });

3. 验证请求是否被重复发送 #

给请求添加唯一标识，确认两次函数调用是否来自同一请求：

• 在前端fetch请求中添加自定义请求头：

fetch(`${functionEndPoint}`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`,
    'X-Request-ID': Math.random().toString(36).substring(2) // 添加唯一ID
  },
  body: JSON.stringify(inputData)
})

• 在Edge函数中打印这个ID：

console.log("Request ID:", _req.headers.get('X-Request-ID'))

如果两次日志的ID相同，说明是同一请求被重复处理；如果不同，则存在两次独立的请求触发。

4. 排查Supabase函数部署配置 #

检查Supabase函数的部署设置：

• 是否开启了自动重试机制（比如函数返回错误时自动重试，但你的函数返回200，这种概率较低）
• 查看Supabase日志中的请求ID，确认两次调用是否属于同一请求的重复执行

5. 排除浏览器或扩展干扰 #

• 尝试禁用浏览器的所有扩展，排除扩展自动重复发送请求的可能
• 使用浏览器网络面板查看实际发送的请求数量，确认是否有两次POST请求被发送

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