🔍 What Is CORS?

CORS (Cross-Origin Resource Sharing) is a security mechanism built into web browsers. It controls which websites are allowed to make requests to a server from a different domain.

In plain terms:

If your frontend is at https://app.mysaas.com and your API is at https://xyz.supabase.co, the browser won’t let them talk to each other unless the API explicitly says, “Yes, I trust requests from this origin.”

🧠 Why Does CORS Exist?

CORS protects users from malicious websites trying to read sensitive data from another site without permission.

Example attack (without CORS):

1. You log into your bank.
2. You visit evil-site.com.
3. That site silently makes a request to your bank and reads your account info.

CORS prevents this. The bank’s server must include headers that say “Only allow mybank.com to access this.”

🧪 What Happens When CORS Fails?

Your browser blocks the request. You’ll see this:

Access to fetch at 'https://xyz.supabase.co/rest/v1/data'
from origin 'https://your-app.com' has been blocked by CORS policy.


Important: The server still received the request—your browser just refused to show you the response.

🛠 What Triggers CORS?

• Calling an API on a different domain
• Sending custom headers (like Authorization)
• Using POST, PUT, or DELETE
• Sending withCredentials (cookies, auth tokens)

When any of these happen, the browser performs a preflight request (an OPTIONS request) to ask the server:

“Hey, are you cool with this?”

If the server says no—or doesn’t say anything—your browser stops the request cold.

✅ What You Need to Do

To allow cross-origin requests:

• The server (e.g., Supabase, Edge Function, proxy) must return headers like:

Access-Control-Allow-Origin: https://your-frontend.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Authorization, Content-Type

⚠️ Quick Reality Check

As of 2025, Supabase no longer provides a dashboard setting to configure CORS headers. The previous “API” or “Database” tabs used for this are gone.

If you're looking for a dropdown or input field to set allowed origins: stop. It’s not there anymore.

✅ What You Can Still Do

Use Case --> Solution

REST API (PostgREST) --> Supabase sets CORS headers automatically

Custom domains or origin control --> Use a reverse proxy or CDN edge middleware

Edge Functions --> Manually set CORS headers in your response

Testing CORS behavior --> Use curl, fetch(), and browser dev tools.

🔁 Supabase REST API: What Happens Automatically?

Supabase’s REST API (based on PostgREST) adds basic CORS headers by default. You don’t control them directly, but they generally work if:

• Your frontend domain is serving over HTTPS
• You send requests with standard headers (Content-Type, Authorization, etc.)
• You don’t need to support credentials (withCredentials) or non-simple requests

❗ If you need more fine-grained CORS control (like custom headers or subdomain wildcards), you’ll need to use a proxy layer.

🧠 When to Use Middleware or a Reverse Proxy

If you’re building a production app and want tight control over CORS, consider sitting a proxy in front of Supabase:

🔧 Good options:

• Cloudflare Workers
• Vercel Edge Middleware
• AWS CloudFront
• Custom Express or Fastify server

Example: Cloudflare Worker CORS Proxy

export default {
 async fetch(request) {
   const url = new URL(request.url)
   const origin = request.headers.get("Origin")

   const proxied = await fetch("https://your-project.supabase.co/rest/v1/your_table", {
     method: request.method,
     headers: request.headers
   })

   return new Response(proxied.body, {
     status: proxied.status,
     headers: {
       "Access-Control-Allow-Origin": origin || "*",
       "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
       "Access-Control-Allow-Headers": "Authorization, Content-Type, apikey",
       ...Object.fromEntries(proxied.headers),
     },
   })
 },
}


⚙️ Handling CORS in Supabase Edge Functions

Unlike PostgREST, Supabase Edge Functions require you to handle CORS manually.

Here’s the correct way to add CORS headers:

// supabase/functions/hello-world/index.ts
if (req.method === "OPTIONS") {
 return new Response("ok", {
   headers: {
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
     "Access-Control-Allow-Headers": "authorization, content-type, apikey",
   },
 })
}

return new Response(JSON.stringify({ message: "Hello world" }), {
 headers: {
   "Access-Control-Allow-Origin": "*",
   "Content-Type": "application/json",
 },
})


🔒 Swap * with your domain in production for security.

🧪 How to Test Your CORS Setup

✅ Option 1: curl (simulate browser origin)

bash

CopyEdit

curl -H "Origin: https://your-frontend.com" -I https://your-project.supabase.co/rest/v1/your_table


Look for:

arduino

CopyEdit

Access-Control-Allow-Origin: https://your-frontend.com


✅ Option 2: Browser Console fetch

fetch("https://your-project.supabase.co/rest/v1/your_table", {
 method: "GET",
 headers: {
   apikey: "your-anon-key",
   Authorization: "Bearer your-jwt"
 }
}).then(console.log).catch(console.error)


Use browser dev tools → Network tab → check Response Headers and Console Errors.

🧭 Final Tips

• Don’t rely on old docs—CORS in Supabase is now decentralized.
• Proxy + middleware = full control.
• Edge Functions = your job to handle CORS.
• Never allow * in production with credentials.

‍