如何在Cloudflare Worker中传递Supabase引用而非对象

我在Cloudflare Worker中创建了Supabase客户端，并将其传入fetch处理函数，代码如下：

addEventListener("fetch", (event) => {
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
  event.respondWith(handleRequest(event.request, {supabase: supabase}));
});

async function handleRequest(request, obj) {
  // ...其他逻辑
  else if (request.url.includes("script.js")) {
    return new Response(js(request, obj.supabase), {
      headers: { "content-type": "text/javascript" },
    });
  }
  // ...其他逻辑
}

接着我在生成前端脚本的函数里尝试将Supabase客户端绑定到DOM元素上，代码示例：

const js = (request, supabase) => {
  return ` 
  const send = document.getElementById('send') 
  send.supabase = ${supabase} 
  // ...后续操作
  }});`
}
export default js;

未引入Supabase时一切正常，但浏览器中查看生成的脚本时，发现Supabase对象被转成了无效字符串：

const send = document.getElementById('send')
send.supabase = [object Object]

请问如何在此处获取可用的Supabase引用，而非这个无效的对象字符串？

核心问题是：后端Worker环境中的Supabase客户端对象无法直接传递给前端。当你在模板字符串中直接拼接${supabase}时，JavaScript会自动调用对象的toString()方法，最终得到[object Object]；且前后端运行环境完全不同，前端无法复用后端的客户端实例，必须自己初始化。

正确做法是在前端脚本中独立初始化Supabase客户端：

1. 使用安全的密钥：确保传给前端的是Supabase的anon密钥（绝对不能暴露service_role密钥，这会导致数据安全风险）。
2. 修改脚本生成逻辑：将Supabase初始化代码注入前端脚本，让前端自行创建客户端实例。

修改后的代码示例：

1. 调整Worker中的脚本生成函数 #

// 不再接收后端的supabase对象参数
const js = (request) => {
  return ` 
  // 前端初始化Supabase客户端
  const supabase = createClient('${SUPABASE_URL}', '${SUPABASE_ANON_KEY}');
  
  const send = document.getElementById('send') 
  send.supabase = supabase;
  
  // 后续可正常编写Supabase操作逻辑
  // 示例：
  // send.addEventListener('click', async () => {
  //   const { data, error } = await supabase.from('your_table').select('*');
  // });
  }});`
}
export default js;

2. 调整Worker的fetch处理逻辑 #

addEventListener("fetch", (event) => {
  // 后端若需要Supabase操作，可在此创建专用客户端（用service_role密钥）
  // const backendSupabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  // ...其他逻辑
  else if (request.url.includes("script.js")) {
    return new Response(js(request), {
      headers: { "content-type": "text/javascript" },
    });
  }
  // ...其他逻辑
}

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