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.