CORS configuration in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding CORS Purpose

What is the main reason to configure CORS (Cross-Origin Resource Sharing) in a Supabase project?

A To automatically backup Supabase data to another region

B To encrypt data stored in Supabase databases

C To speed up database queries by caching results

D To allow web applications from different origins to securely access Supabase APIs

💡 Hint

Think about why browsers restrict web pages from calling APIs on different domains.

CORS is a security feature that controls which web pages from other origins can access your Supabase APIs. It prevents unauthorized cross-origin requests.

❓ Configuration

intermediate

Correct CORS Origin Setting

You want to allow only your website https://myapp.example.com to access your Supabase API. Which CORS origin setting is correct?

A https://myapp.example.com

B *

C http://myapp.example.com

D myapp.example.com

💡 Hint

Remember CORS origins must include the scheme (http or https) and be exact.

Only the exact origin with https scheme matches your website. Using * allows all origins, which is insecure. Omitting scheme or using http is incorrect.

❓ Architecture

advanced

Impact of Incorrect CORS Configuration

If you set CORS origin to * in Supabase, what is a likely security risk?

A Any website can make requests to your Supabase API, potentially exposing user data

B Your Supabase database will become read-only

C Your API will reject all requests from browsers

D Your Supabase project will automatically scale down

💡 Hint

Think about what allowing all origins means for API access.

Setting CORS to * means any website can call your API, risking data exposure or misuse if authentication is weak.

❓ service_behavior

advanced

Behavior of Supabase API with Missing CORS Header

What happens when a browser calls a Supabase API from an origin not listed in the CORS configuration?

A The browser automatically retries the request with CORS headers

B The API call succeeds and returns data normally

C The browser blocks the response due to missing CORS headers, so the frontend cannot read the data

D The Supabase API returns a 403 Forbidden error

💡 Hint

Consider how browsers enforce CORS policies on responses.

If the response lacks the correct CORS headers for the calling origin, browsers block frontend JavaScript from accessing the response, even if the server sends data.

❓ security

expert

Best Practice for CORS in Supabase with Multiple Frontends

You have two frontend apps: https://app1.example.com and https://app2.example.com. How should you configure CORS in Supabase to allow both securely?

A Set CORS origin to <code>https://app1.example.com https://app2.example.com</code> as a single string

B List both origins explicitly in the CORS settings separated by commas

C Set CORS origin to <code>https://example.com</code> without subdomains

D Set CORS origin to <code>*</code> to allow all origins

💡 Hint

Check how Supabase expects multiple origins to be listed.

Supabase allows multiple origins by listing them separated by commas. Using * is insecure. Omitting subdomains or combining origins without commas is invalid.