CORS configuration in Supabase

Introduction

CORS configuration lets your web app safely ask for data from your Supabase backend even if they are on different websites.

When your frontend app runs on a different website than your Supabase backend.

When you want to allow only certain websites to access your Supabase data.

When you want to prevent other websites from using your Supabase API without permission.

Syntax

Supabase

cors:
  allowed_origins:
    - 'https://example.com'
    - 'https://another-site.com'
  allowed_methods:
    - GET
    - POST
  allowed_headers:
    - Content-Type
    - Authorization

allowed_origins is a list of website addresses allowed to access your backend.

You can specify which HTTP methods and headers are allowed for security.

Examples

Allow only https://myapp.com to access your Supabase backend.

Supabase

cors:
  allowed_origins:
    - 'https://myapp.com'

Allow any website to access your backend (less secure, use carefully).

Supabase

cors:
  allowed_origins:
    - '*'

Allow two specific sites with GET and POST methods and only Authorization header.

Supabase

cors:
  allowed_origins:
    - 'https://site1.com'
    - 'https://site2.com'
  allowed_methods:
    - GET
    - POST
  allowed_headers:
    - Authorization

Sample Program

This configuration allows only https://myfrontend.com to call your Supabase backend using GET and POST requests. It also allows the headers Content-Type and Authorization for these requests.

Supabase

cors:
  allowed_origins:
    - 'https://myfrontend.com'
  allowed_methods:
    - GET
    - POST
  allowed_headers:
    - Content-Type
    - Authorization

Important Notes

Always restrict allowed_origins to trusted websites to keep your backend safe.

Using '*' for origins allows any website but can expose your backend to risks.

Test your CORS settings by trying to access your backend from different websites.

Summary

CORS controls which websites can talk to your Supabase backend.

Set allowed origins, methods, and headers to keep your data safe.

Use specific origins instead of '*' for better security.