CORS configuration in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to allow requests from the correct origin in Supabase CORS settings.

Supabase

const corsConfig = { origin: '[1]' };

Drag options to blanks, or click blank then click option'

A'http://example.com'

B'*'

C'localhost'

D'https://myapp.example.com'

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' which is insecure for production.

Using incomplete or incorrect URLs.

The origin must be the exact URL of your frontend app to allow CORS requests securely.

2fill in blank

medium

Complete the code to set allowed HTTP methods in Supabase CORS configuration.

Supabase

const corsConfig = { methods: ['[1]'] };

Drag options to blanks, or click blank then click option'

AGET, POST

BGET

CGET, POST, PUT, DELETE

DPOST, PUT, DELETE

Attempts:

3 left

💡 Hint

Common Mistakes

Listing methods as a single string instead of separate strings.

Omitting methods needed by the frontend.

To allow all common HTTP methods, include GET, POST, PUT, and DELETE in the methods list.

3fill in blank

hard

Fix the error in the CORS configuration to correctly allow credentials.

Supabase

const corsConfig = { credentials: [1] };

Drag options to blanks, or click blank then click option'

Atrue

B'false'

C'true'

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'true' as a string instead of true boolean.

Omitting the credentials property when needed.

The credentials property must be a boolean true or false, not a string.

4fill in blank

hard

Fill both blanks to configure CORS headers and max age in Supabase.

Supabase

const corsConfig = { headers: ['[1]'], maxAge: [2] };

Drag options to blanks, or click blank then click option'

AContent-Type

BAuthorization

C3600

D600

Attempts:

3 left

💡 Hint

Common Mistakes

Using Content-Type instead of Authorization for headers.

Setting maxAge too low or as a string.

Authorization header is commonly allowed for CORS, and maxAge is set in seconds (3600 = 1 hour).

5fill in blank

hard

Fill all three blanks to create a full CORS configuration object in Supabase.

Supabase

const corsConfig = { origin: '[1]', methods: ['[2]'], credentials: [3] };

Drag options to blanks, or click blank then click option'

A'https://app.example.com'

BGET, POST, PUT

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using false for credentials when cookies are needed.

Leaving origin as '*' in production.

The origin must be your app URL, methods include common HTTP verbs, and credentials is true to allow cookies.

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