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.