Cross-Origin Resource Sharing (CORS)

Imagine you're building a web application. Your frontend (like a React app) runs on app.example.com, but it needs to fetch data from your API running on api.example.com.

This is where Cross-Origin Resource Sharing (CORS) comes in. It's a security feature implemented by web browsers to control how web pages from one origin can request resources from another origin.

CORS is a relaxation of the browser's Same-Origin Policy. This policy is a critical security mechanism that prevents a malicious website from reading sensitive data from another site.

• Origin is defined by the protocol, host, and port.
• https://app.example.com:443 is different from http://app.example.com:80 or https://api.example.com:443.

Without CORS, browsers would block your frontend from talking to your API because they have different origins.