How to Handle CORS in Supabase Edge Functions

1// supabase/functions/_shared/cors.ts
2export const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5  'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
6}

1// supabase/functions/my-function/index.ts
2import { corsHeaders } from '../_shared/cors.ts'
3
4Deno.serve(async (req) => {
5  // Handle CORS preflight
6  if (req.method === 'OPTIONS') {
7    return new Response('ok', { headers: corsHeaders })
8  }
9
10  // Your business logic here
11  try {
12    const { name } = await req.json()
13    const data = { message: `Hello ${name}!` }
14
15    return new Response(JSON.stringify(data), {
16      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
17      status: 200
18    })
19  } catch (error) {
20    // CORS headers must be included in error responses too
21    return new Response(JSON.stringify({ error: error.message }), {
22      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
23      status: 400
24    })
25  }
26})

1Deno.serve(async (req) => {
2  if (req.method === 'OPTIONS') {
3    return new Response('ok', { headers: corsHeaders })
4  }
5
6  try {
7    // Validate input
8    const body = await req.json()
9    if (!body.email) {
10      return new Response(
11        JSON.stringify({ error: 'Email is required' }),
12        {
13          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
14          status: 400
15        }
16      )
17    }
18
19    // Process request...
20    return new Response(
21      JSON.stringify({ success: true }),
22      {
23        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
24        status: 200
25      }
26    )
27  } catch (error) {
28    return new Response(
29      JSON.stringify({ error: 'Internal server error' }),
30      {
31        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
32        status: 500
33      }
34    )
35  }
36})

1// supabase/functions/_shared/cors.ts (production version)
2const ALLOWED_ORIGINS = [
3  'https://yourdomain.com',
4  'https://www.yourdomain.com',
5  'http://localhost:3000' // Keep for local dev
6]
7
8export function getCorsHeaders(origin: string | null) {
9  const allowedOrigin = ALLOWED_ORIGINS.includes(origin ?? '')
10    ? origin!
11    : ALLOWED_ORIGINS[0]
12
13  return {
14    'Access-Control-Allow-Origin': allowedOrigin,
15    'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
16    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
17  }
18}
19
20// In your function
21import { getCorsHeaders } from '../_shared/cors.ts'
22
23Deno.serve(async (req) => {
24  const origin = req.headers.get('origin')
25  const corsHeaders = getCorsHeaders(origin)
26
27  if (req.method === 'OPTIONS') {
28    return new Response('ok', { headers: corsHeaders })
29  }
30
31  // ... rest of your function
32})

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6)
7
8// Call the Edge Function
9const { data, error } = await supabase.functions.invoke('my-function', {
10  body: { name: 'World' }
11})
12
13if (error) {
14  console.error('Function error:', error.message)
15} else {
16  console.log('Response:', data)
17}
18
19// Call with custom headers
20const { data: custom } = await supabase.functions.invoke('my-function', {
21  body: { name: 'World' },
22  headers: { 'x-custom-header': 'my-value' }
23})