I have this supabase edge function deployed: https://idfthtntosibituuwvgh.supabase.co/functions/v1/vocabularies’
And in the browser on calling it it says:
https://idfthtntosibituuwvgh.supabase.co/functions/v1/vocabularies’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
I came across the tutorial of supabase about the preflight and CORS settings and implemented everything in my edge function:
export const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers":
"authorization, x-client-info, apikey, content-type",
"Access-Control-Allow-Methods": "POST, OPTIONS",
};
Function (basic)
Deno.serve(async (req) => {
const { number, topic, baseLanguage, targetLanguage } = await req.json();
if (req.method === "OPTIONS") {
return new Response(null, {
status: 204,
headers: { ...corsHeaders, "Content-Type": "application/json" },
});
}
if (req.method === "POST") {
let jsonIsValid = false;
let reply = "";
let triesCounter = 0;
do {
reply = await getVocabularies(
number,
topic,
baseLanguage,
targetLanguage,
);
jsonIsValid = validateJson(reply);
} while (!jsonIsValid && triesCounter++ < 0);
let reponseText = "ChatGPT responded in no valid JSON format";
if (jsonIsValid) {
reponseText = JSON.stringify(JSON.parse(reply));
}
return new Response(reponseText, {
status: jsonIsValid ? 200 : 500,
headers: { ...corsHeaders, "Content-Type": "application/json" },
});
}
});
Using Insomnia or Postgres works just fine. I have even other edge functions that work fine. But others do not. I am building a react native app.
I tried several tutorials on CORS and they all come back to the supabase tutorial I have implemented. Like /questions/75989524/error-when-trying-to-call-a-supabase-edge-function