CORS configuration in Supabase - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does CORS stand for and why is it important?

CORS stands for Cross-Origin Resource Sharing. It is important because it controls how web pages from one site can request resources from another site, helping to keep users safe by preventing unauthorized access.

beginner

How do you configure CORS in Supabase?

In Supabase, you configure CORS by setting allowed origins in the project settings under API. You specify which web addresses can access your Supabase backend resources.

intermediate

What happens if you do not configure CORS correctly in Supabase?

If CORS is not configured correctly, browsers will block requests from your web app to Supabase if they come from disallowed origins, causing your app to fail to load data or perform actions.

beginner

What is an example of a safe CORS configuration for a development environment?

Allowing 'http://localhost:3000' as an origin is safe for development because it limits access to your local machine only, preventing other sites from accessing your Supabase backend.

intermediate

Why should you avoid using '*' (wildcard) in CORS origins in production?

Using '*' allows any website to access your backend, which can lead to security risks like data leaks or unauthorized actions. It's best to specify exact trusted origins.

What does CORS control in web applications?

A User login credentials

B Which websites can access resources from another domain

C The color scheme of a website

D How fast a website loads

CORS controls which websites (origins) can access resources from a different domain to protect users.

In Supabase, where do you set allowed CORS origins?

A In the project API settings

B In the database schema

C In the client-side JavaScript only

D In the Supabase storage settings

Allowed CORS origins are set in the Supabase project API settings to control backend access.

What is a safe CORS origin to allow during local development?

A http://localhost:3000

B *

C https://example.com

D ftp://localhost

Allowing 'http://localhost:3000' restricts access to your local machine during development.

What risk does using '*' as a CORS origin pose in production?

A Slows down your website

B Blocks all websites from accessing your backend

C Allows any website to access your backend

D Causes database corruption

Using '*' allows any website to access your backend, which is a security risk.

If a browser blocks a request due to CORS, what is likely the cause?

A The internet connection is slow

B The browser is outdated

C The server is down

D The request origin is not allowed in CORS settings

Browsers block requests when the origin is not listed in the allowed CORS origins.

Explain what CORS is and why it matters when building web apps with Supabase.

Think about how websites talk to each other safely.

Describe how to set up CORS in Supabase for a web app running on localhost during development.

Focus on the steps inside Supabase dashboard.

Practice

1. What does CORS configuration in Supabase control?

easy

A. How fast your database queries run

B. Which websites can access your Supabase backend

C. The color scheme of your Supabase dashboard

D. The size of your database storage

Solution

1. Step 1: Understand CORS purpose

   CORS stands for Cross-Origin Resource Sharing and controls which websites can send requests to your backend.

2. Step 2: Apply to Supabase context

   In Supabase, CORS settings define allowed origins that can communicate with your backend securely.

3. Final Answer:

   Which websites can access your Supabase backend -> Option B

4. Quick Check:

   CORS controls access origins [OK]

Hint: CORS controls website access to backend [OK]

Common Mistakes:

• Confusing CORS with database speed
• Thinking CORS changes UI colors
• Assuming CORS affects storage size

2. Which of the following is the correct way to allow only https://example.com in Supabase CORS settings?

easy

A. Set allowed origins to ['https://example.com']

B. Set allowed origins to ['http://example.com']

C. Set allowed origins to ['*']

D. Set allowed origins to ['example.com']

Solution

1. Step 1: Understand allowed origins format

   Allowed origins must include the full scheme (https://) and domain to be valid.

2. Step 2: Match correct origin

   Only 'https://example.com' matches the requirement exactly; '*' allows all origins, which is insecure.

3. Final Answer:

   Set allowed origins to ['https://example.com'] -> Option A

4. Quick Check:

   Use full URL with https [OK]

Hint: Use full URL with https:// for origins [OK]

Common Mistakes:

• Using '*' which allows all origins
• Omitting https:// in origin
• Using only domain without scheme

3. Given this Supabase CORS config: { allowedOrigins: ['https://app.com'], allowedMethods: ['GET', 'POST'] }, what happens if a browser sends a DELETE request from https://app.com?

medium

A. Request is allowed but logged as warning

B. Request is allowed and processed

C. Request is blocked due to origin not allowed

D. Request is blocked due to method not allowed

Solution

1. Step 1: Check allowed origins

   The origin 'https://app.com' is allowed, so origin is not the issue.

2. Step 2: Check allowed methods

   Only 'GET' and 'POST' methods are allowed; 'DELETE' is not permitted.

3. Final Answer:

   Request is blocked due to method not allowed -> Option D

4. Quick Check:

   Method not in allowedMethods [OK]

Hint: Check if method is in allowedMethods list [OK]

Common Mistakes:

• Assuming origin blocks the request
• Thinking DELETE is allowed by default
• Believing request is allowed with warning

4. You configured Supabase CORS with allowedOrigins: ['https://myapp.com'] but your frontend at https://myapp.com still gets CORS errors. What is the likely mistake?

medium

A. You forgot to include 'https://' in allowedOrigins

B. You set allowedOrigins to '*' instead of specific origin

C. You did not add the frontend URL exactly as it appears

D. You need to add 'http://' instead of 'https://'

Solution

1. Step 1: Verify exact origin match

   CORS requires exact match including scheme, domain, and port if any.

2. Step 2: Check frontend URL correctness

   If frontend URL differs (e.g., with www or port), it must be added exactly in allowedOrigins.

3. Final Answer:

   You did not add the frontend URL exactly as it appears -> Option C

4. Quick Check:

   Exact origin match needed [OK]

Hint: Match frontend URL exactly in allowedOrigins [OK]

Common Mistakes:

• Assuming '*' fixes errors
• Using http instead of https incorrectly
• Ignoring subdomains or ports in origin

5. You want to securely allow your React app at https://app.example.com and your admin panel at https://admin.example.com to access Supabase. Which CORS configuration is best?

hard

A. allowedOrigins: ['https://app.example.com', 'https://admin.example.com']

B. allowedOrigins: ['*']

C. allowedOrigins: ['https://example.com']

D. allowedOrigins: ['http://app.example.com', 'http://admin.example.com']

Solution

1. Step 1: Avoid using '*' for security

   Using '*' allows all origins, which is insecure for private apps.

2. Step 2: Specify exact allowed origins

   List both 'https://app.example.com' and 'https://admin.example.com' to allow only these trusted sites.

3. Step 3: Use correct scheme https

   Use 'https://' to match secure frontend URLs exactly.

4. Final Answer:

   allowedOrigins: ['https://app.example.com', 'https://admin.example.com'] -> Option A

5. Quick Check:

   List exact secure origins [OK]

Hint: List each allowed origin explicitly with https [OK]

Common Mistakes:

• Using '*' which is insecure
• Using only base domain without subdomains
• Using http instead of https