英文:
Supabase edge function running twice, but just one call
问题
我有一个在Supabase中用TypeScript编写的相对简单的边缘函数，它连接到我们的PostgreSQL数据库并运行查询。该函数通过HTML按钮调用。在CLI本地运行或通过部署后的生产环境，不管哪种情况，该边缘函数都会运行两次。查询运行两次，但控制台日志显示整个函数都运行了两次。然而，在浏览器控制台日志中，只显示在按钮点击时调用了一次函数。有什么建议吗？
以下是HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Invoke Supabase Function</title>
</head>
<body>
<button id="invoke-button">Invoke Function</button>
<script language="Javascript">
const apiKey = XXXXX
const functionEndPoint = 'http://localhost:54321/functions/v1/';
const inputData = { name: 'Blah' };
const invokeFunction = () => {
console.log('Called invokeFunction');
fetch(`${functionEndPoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify(inputData)
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
};
document.getElementById('invoke-button').addEventListener('click', invokeFunction);
</script>
</body>
</html>
以下是函数代码：
import * as postgres from 'https://deno.land/x/postgres@v0.14.2/mod.ts';
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@1.33.1';
import { corsHeaders } from '../_shared/cors.ts';
const databaseUrl = "postgresql://XXXXX"
const pool = new postgres.Pool(databaseUrl, 3, true)
serve(async (_req) => {
try {
// 从池中获取连接
const connection = await pool.connect()
try {
// 运行查询（实际上是一个非确定性的存储过程）
console.log("inbound startgame request...")
const result = await connection.queryObject`SELECT public."newGame"();`
const rr = result.rows
console.log(rr)
// 将结果编码为漂亮格式的JSON
const body = JSON.stringify(
rr,
(key, value) => (typeof value === 'bigint' ? value.toString() : value),
2
)
// 返回带有正确内容类型标头的响应
return new Response(
JSON.stringify(rr),
{
headers: { ...corsHeaders, "Content-Type": "application/json" },
status: 200,
},
)
} finally {
// 将连接释放回池中
connection.release()
}
} catch (err) {
console.error(err)
return new Response(String(err?.message ?? err), { status: 500 })
}
})
英文:
I have a relatively simple edge function in typescript at Supabase that connects to our postgres db and runs a query. The function is invoked via an html button. When run locally in the cli, or via production, once deployed, it both cases, the edge function runs twice. The query is running twice, but console logging shows the entire function is running twice. However, in the browser console logging only shows one call to the function on the button click. Any ideas?
Here's the html:
<html>
<head>
<meta charset="utf-8">
<title>Invoke Supabase Function</title>
</head>
<body>
<button id="invoke-button">Invoke Function</button>
<script language="Javascript">
const apiKey = XXXXX
const functionEndPoint = 'http://localhost:54321/functions/v1/';
const inputData = { name: 'Blah' };
const invokeFunction = () => {
console.log('Called invokeFunction');
fetch(`${functionEndPoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify(inputData)
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
};
document.getElementById('invoke-button').addEventListener('click', invokeFunction);
</script>
</body>
</html>
Here's the function:
import * as postgres from 'https://deno.land/x/postgres@v0.14.2/mod.ts'
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
import { createClient } from 'https://esm.sh/@supabase/supabase-js@1.33.1'
import { corsHeaders } from '../_shared/cors.ts'
const databaseUrl = "postgresql://XXXXX"
const pool = new postgres.Pool(databaseUrl, 3, true)
serve(async (_req) => {
try {
// Grab a connection from the pool
const connection = await pool.connect()
try {
// Run a query (its actually a non-deterministic fb function/stored proc)
console.log("inbound startgame request...")
const result = await connection.queryObject`SELECT public."newGame"();`
const rr = result.rows
console.log(rr)
// Encode the result as pretty printed JSON
const body = JSON.stringify(
rr,
(key, value) => (typeof value === 'bigint' ? value.toString() : value),
2
)
// Return the response with the correct content type header
return new Response(
JSON.stringify(rr),
{
headers: { ...corsHeaders, "Content-Type": "application/json" },
status: 200,
},
)
} finally {
// Release the connection back into the pool
connection.release()
}
} catch (err) {
console.error(err)
return new Response(String(err?.message ?? err), { status: 500 })
}
答案1
得分: 2
Eureka! 边缘函数需要这个：
if (req.method === 'OPTIONS') {
return new Response('ok', { headers: corsHeaders })
}
显然，浏览器会发送一个预检请求到该函数，以查看它是否支持跨域资源共享（CORS）。如果你不正确处理这个请求，监听函数会在预检查期间正常运行，然后再在主要调用期间运行。由于上面的代码返回了CORS标头，因此浏览器的两次运行都成功了。
英文:
Eureka! The edge function needs this:
if (req.method === 'OPTIONS') {
return new Response('ok', { headers: corsHeaders })
}
Apparently browsers send a pre-flight request to the function to see if it supports CORs. If you don't handle this properly, the listening function just runs normally during the pre-flight check, and then again during the main call. Since the code above was returning CORs headers, both runs were successful from the browser.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论