CORS configuration in Supabase - Mini Project: Build & Apply

Configure CORS for a Supabase Project

📖 Scenario: You are setting up a Supabase backend for a web app. To allow your frontend to communicate securely with your backend, you need to configure CORS (Cross-Origin Resource Sharing) settings correctly.This project will guide you through creating and updating the CORS configuration for your Supabase project.

🎯 Goal: Configure the CORS settings in Supabase to allow requests only from the exact origin https://myfrontend.example.com.

📋 What You'll Learn

Create a list variable named allowed_origins with the origin https://myfrontend.example.com

Create a configuration dictionary named cors_config with a key origins set to the allowed_origins list

Write a function named apply_cors_config that takes config as a parameter and returns a dictionary with key status and value "CORS applied"

Call the apply_cors_config function with cors_config and assign the result to result

💡 Why This Matters

🌍 Real World

Configuring CORS is essential to allow your frontend web app to securely communicate with your backend services without exposing your backend to unwanted origins.

💼 Career

Understanding and configuring CORS is a common task for cloud engineers and backend developers to ensure secure and functional web applications.

1

Create the allowed origins list

Create a list variable called allowed_origins containing the single string "https://myfrontend.example.com".

Supabase

# Your code here

Hint

Use square brackets to create a list with one string element.

2

Create the CORS configuration dictionary

Create a dictionary called cors_config with a key "origins" set to the variable allowed_origins.

Supabase

allowed_origins = ["https://myfrontend.example.com"]
# Your code here

Hint

Use curly braces to create a dictionary and set the key to the list variable.

3

Write a function to apply the CORS configuration

Define a function named apply_cors_config that takes one parameter config and returns a dictionary with the key "status" and the value "CORS applied".

Supabase

allowed_origins = ["https://myfrontend.example.com"]
cors_config = {"origins": allowed_origins}
# Your code here

Hint

Define a function with def and return the required dictionary.

4

Call the function and assign the result

Call the function apply_cors_config with the argument cors_config and assign the result to a variable named result.

Supabase

allowed_origins = ["https://myfrontend.example.com"]
cors_config = {"origins": allowed_origins}

def apply_cors_config(config):
    return {"status": "CORS applied"}

# Your code here

Hint

Call the function with the dictionary variable and assign the output to result.

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