docs: update cors documentation to include new method (supabase#42644)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Documentation**
* Updated Edge Functions CORS header guides with version-specific
approaches for SDK v2.95.0+ and earlier versions.
* Revised code examples across multiple Edge Functions to reflect
current CORS header implementation patterns.
* Enhanced troubleshooting documentation with updated preflight handling
guidance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: mandarini

apps/docs/content/guides/functions/cors.mdx

@@ -10,19 +10,16 @@ See the [example on GitHub](https://github.com/supabase/supabase/blob/master/exa
 
 ### Recommended setup
 
-We recommend adding a `cors.ts` file within a [`_shared` folder](/docs/guides/functions/quickstart#organizing-your-edge-functions) which makes it easy to reuse the CORS headers across functions:
+<Admonition type="tip">
 
-```ts cors.ts
-export const corsHeaders = {
-  'Access-Control-Allow-Origin': '*',
-  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
-}
-```
+**For `@supabase/supabase-js` v2.95.0 and later:** Import CORS headers directly from the SDK to ensure they stay synchronized with any new headers added to the client libraries.
+
+</Admonition>
 
-You can then import and use the CORS headers within your functions:
+Import `corsHeaders` from `@supabase/supabase-js/cors` to automatically get all required headers:
 
 ```ts index.ts
-import { corsHeaders } from '../_shared/cors.ts'
+import { corsHeaders } from '@supabase/supabase-js/cors'
 
 console.log(`Function "browser-with-cors" up and running!`)
 
@@ -50,3 +47,24 @@ Deno.serve(async (req) => {
   }
 })
 ```
+
+This approach ensures that when new headers are added to the Supabase SDK, your Edge Functions automatically include them, preventing CORS errors.
+
+#### For versions before 2.95.0
+
+If you're using `@supabase/supabase-js` before v2.95.0, you'll need to hardcode the CORS headers. Add a `cors.ts` file within a [`_shared` folder](/docs/guides/functions/quickstart#organizing-your-edge-functions):
+
+```ts _shared/cors.ts
+export const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+}
+```
+
+Then import it in your function:
+
+```ts index.ts
+import { corsHeaders } from '../_shared/cors.ts'
+
+// ... rest of your function code
+```

apps/docs/content/guides/functions/examples/cloudflare-turnstile.mdx

@@ -23,7 +23,7 @@ supabase functions new cloudflare-turnstile
 And add the code to the `index.ts` file:
 
 ```ts index.ts
-import { corsHeaders } from '../_shared/cors.ts'
+import { corsHeaders } from '@supabase/supabase-js/cors' // v2.95.0+
 
 console.log('Hello from Cloudflare Trunstile!')
 

apps/docs/content/troubleshooting/unable-to-call-edge-function.mdx

@@ -14,25 +14,58 @@ If you're having trouble invoking an Edge Function or experiencing CORS issues,
 
 ## Proper CORS handling
 
-Make sure your function handles OPTIONS preflight requests:
+Make sure your function handles OPTIONS preflight requests.
+
+### Recommended (v2.95.0+)
+
+<Admonition type="tip">
+
+**For `@supabase/supabase-js` v2.95.0 and later:** Import CORS headers directly from the SDK to ensure they stay synchronized with any new headers added to the client libraries.
+
+</Admonition>
 
 ```tsx
+// Recommended approach
+import { corsHeaders } from '@supabase/supabase-js/cors' // v2.95.0+
+
+Deno.serve(async (req) => {
+  if (req.method === 'OPTIONS') {
+    return new Response('ok', { headers: corsHeaders })
+  }
+
+  // Your function logic here
+  return new Response(JSON.stringify({ status: 'Success' }), {
+    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+  })
+})
+```
+
+### For versions before 2.95.0
+
+If you're using `@supabase/supabase-js` before v2.95.0, you'll need to hardcode the CORS headers. Add a `cors.ts` file within a [`_shared` folder](/docs/guides/functions/quickstart#organizing-your-edge-functions):
+
+```ts
+// _shared/cors.ts
+export const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+}
+```
+
+Then import it in your function:
+
+```tsx
+import { corsHeaders } from '../_shared/cors.ts'
+
 Deno.serve(async (req) => {
   // Handle CORS preflight requests
   if (req.method === 'OPTIONS') {
-    return new Response(null, {
-      status: 200,
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
-        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-      },
-    })
+    return new Response('ok', { headers: corsHeaders })
   }
 
   // Your function logic here
-  return new Response('Success', {
-    headers: { 'Access-Control-Allow-Origin': '*' },
+  return new Response(JSON.stringify({ status: 'Success' }), {
+    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
   })
 })
 ```

examples/edge-functions/supabase/functions/_shared/cors.ts

@@ -1,3 +1,11 @@
+// NOTE: For @supabase/supabase-js v2.95.0 and later, you can import CORS headers
+// directly from the SDK instead of hardcoding them:
+//
+// import { corsHeaders } from 'jsr:@supabase/supabase-js@2/cors'
+//
+// This ensures your CORS headers stay synchronized with any new headers added to the SDK.
+// For versions before 2.95.0, use this hardcoded configuration:
+
 export const corsHeaders = {
   'Access-Control-Allow-Origin': '*',
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',

examples/edge-functions/supabase/functions/browser-with-cors/index.ts

@@ -2,7 +2,11 @@
 // https://deno.land/manual/getting_started/setup_your_environment
 // This enables autocomplete, go to definition, etc.
 
-import { corsHeaders } from '../_shared/cors.ts'
+// For @supabase/supabase-js v2.95.0+, import CORS headers directly from the SDK:
+import { corsHeaders } from 'jsr:@supabase/supabase-js@2/cors'
+
+// For older versions, use a shared cors.ts file:
+// import { corsHeaders } from '../_shared/cors.ts'
 
 console.log(`Function "browser-with-cors" up and running!`)
 

examples/edge-functions/supabase/functions/get-tshirt-competition/index.ts

@@ -3,7 +3,10 @@
 // This enables autocomplete, go to definition, etc.
 
 import { createClient } from 'npm:supabase-js@2'
-import { corsHeaders } from '../_shared/cors.ts'
+// New approach (v2.95.0+)
+import { corsHeaders } from 'jsr:@supabase/supabase-js@2/cors'
+// For older versions:
+// import { corsHeaders } from '../_shared/cors.ts'
 
 console.log(`Function "get-tshirt-competition" up and running!`)
 

examples/edge-functions/supabase/functions/read-storage/index.ts

@@ -3,11 +3,13 @@
 // This enables autocomplete, go to definition, etc.
 
 import { createClient } from 'npm:supabase-js@2'
-
-const corsHeaders = {
-  'Access-Control-Allow-Origin': '*',
-  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey',
-}
+// New approach (v2.95.0+)
+import { corsHeaders } from 'jsr:@supabase/supabase-js@2/cors'
+// For older versions, use hardcoded headers:
+// const corsHeaders = {
+//   'Access-Control-Allow-Origin': '*',
+//   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+// }
 
 Deno.serve(async (req) => {
   // read a text file from storage and print its contents

examples/edge-functions/supabase/functions/restful-tasks/index.ts

@@ -3,12 +3,14 @@
 // This enables autocomplete, go to definition, etc.
 
 import { createClient, SupabaseClient } from 'npm:supabase-js@2'
-
-const corsHeaders = {
-  'Access-Control-Allow-Origin': '*',
-  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey',
-  'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
-}
+// New approach (v2.95.0+)
+import { corsHeaders } from 'jsr:@supabase/supabase-js@2/cors'
+// For older versions, use hardcoded headers:
+// const corsHeaders = {
+//   'Access-Control-Allow-Origin': '*',
+//   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+//   'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
+// }
 
 interface Task {
   name: string

examples/edge-functions/supabase/functions/select-from-table-with-auth-rls/index.ts

@@ -3,7 +3,10 @@
 // This enables autocomplete, go to definition, etc.
 
 import { createClient } from 'npm:supabase-js@2'
-import { corsHeaders } from '../_shared/cors.ts'
+// New approach (v2.95.0+)
+import { corsHeaders } from 'jsr:@supabase/supabase-js@2/cors'
+// For older versions:
+// import { corsHeaders } from '../_shared/cors.ts'
 
 console.log(`Function "select-from-table-with-auth-rls" up and running!`)