英文:
How to use JS client to pass formData to Supabase Edge function
问题
我正在尝试使用JS/TS客户端调用Supabase边缘函数，并将音频从客户端传递到服务器。在此过程中，我在客户端上使用了formData，并尝试将其传递给请求主体。以下是我的客户端代码：
const formData = new FormData();
const file = await fetch(uri);
const fileBlob = await file.blob();
const filename = getFileName(uri);
formData.append("file", fileBlob, filename);
const { data, error } = await supabase.functions.invoke("openai", {
body: formData,
});
在服务器端，我按如下方式解析表单数据：
// Supabase functions handler
serve(async (req) => {
const form = await multiParser(req);
if (form) {
console.log("There is a form!");
return new Response(JSON.stringify({}));
}
console.log("No form sent");
return new Response(JSON.stringify({}));
});
但它只记录"没有发送表单"。是否有一种方法可以使用Supabase客户端发送表单数据？还是我需要使用fetch或axios进行请求？或者是否有更好的方法将音频从浏览器发送到Supabase/Deno函数？
英文:
I'm trying to call a Supabase edge function using the JS/TS client and pass audio from the client to the server. In doing this, I'm using formData on the client and trying to pass it in the body. Here's my client code:
const formData = new FormData();
const file = await fetch(uri);
const fileBlob = await file.blob();
const filename = getFileName(uri);
formData.append("file", fileBlob, filename);
const { data, error } = await supabase.functions.invoke("openai", {
body: formData,
});
On the server, I'm parsing the form data as follows:
// Supabase functions handler
serve(async (req) => {
const form = await multiParser(req);
if (form) {
console.log("There is a form!");
return new Response(JSON.stringify({}));
}
console.log("No form sent");
return new Response(JSON.stringify({}));
});
And it's just logging "No form sent". Is there a way to send form data using the Supabase client? Or do I need to just make the request using fetch or axios? Or is there a better way to send audio from the browser to a Supabase/Deno function?
答案1
得分: 0
在这种情况下出现的问题是我没有处理在POST调用之前发生的OPTIONS调用。这需要发生，因为它是从浏览器中调用的（请参考这里了解CORS和Supabase）。
所以我不得不在一个共享文件中声明corsHeaders：
export const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
}
然后导入它并在函数的最开始添加一个条件处理程序：
import { corsHeaders } from "../_shared/cors.ts"
serve(async (req) => {
if (req.method === "OPTIONS") {
return new Response("ok", { headers: corsHeaders });
}
...
英文:
This issue in this case was that I wasn't handling the OPTIONS call that happened before the POST call. This needs to happen because it was being invoked from the browser (see here for CORS and supabase).
So I had to declare corsHeaders in a shared file:
export const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
}
And then import it and add a conditional handler at the very beginning of the function:
import { corsHeaders } from "../_shared/cors.ts"
serve(async (req) => {
if (req.method === "OPTIONS") {
return new Response("ok", { headers: corsHeaders });
}
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论