User interface on dashboard.finance.com
Backend & Runtime / Knowledge library
Cross-Origin Resource Sharing (CORS)
Uses HTTP headers to permit selected browser cross-origin reads
Why learn Cross-Origin Resource Sharing (CORS)?
It enables controlled web API sharing across origins
The problem it solves
It relaxes the same-origin policy for explicitly approved requests
Where it came from
Cross-Origin Resource Sharing (CORS) is a networking and web concept that uses HTTP headers to permit selected browser cross-origin reads. Its guarantees and tradeoffs depend on the concrete implementation and operating context.
Build your understanding
Work through these exercises in order. Try the task before opening a reference.
- Define Cross-Origin Resource Sharing (CORS) and distinguish it from a neighboring concept.
- Choose a realistic task where Cross-Origin Resource Sharing (CORS) is appropriate.
- Identify a failure mode caused by misusing Cross-Origin Resource Sharing (CORS).
- Interpret a small design or result involving Cross-Origin Resource Sharing (CORS).
- Explain one tradeoff or limitation of Cross-Origin Resource Sharing (CORS).
Documentation and sources
- MDN Web Technology Glossary (developer.mozilla.org)
Connect the ideas
Explore next
Real World Example
Unified Analytics Dashboard Integration
A financial services firm providing a central dashboard that aggregates data from multiple internal microservices hosted on distinct subdomains.
The business problem
The browser blocks the dashboard from fetching real-time market data from the analytics API because the origin of the dashboard does not match the origin of the API, triggering a security violation.
How this topic solves it
Cross-Origin Resource Sharing (CORS) allows the API server to explicitly declare which origins are permitted to access its resources by including specific HTTP headers in its responses, effectively relaxing the browser's same-origin policy.
- Identify the specific origin of the dashboard application.
- Configure the API server to inspect the incoming Origin request header.
- Append the Access-Control-Allow-Origin header to the API response with the dashboard's origin.
- Handle preflight OPTIONS requests to validate allowed methods and headers.
This diagram illustrates the interaction between the browser, the dashboard, and the API server during a cross-origin request.
Enforces same-origin policy
Host for analytics.finance.com
Includes Access-Control headers
- Dashboard → Initiates fetch request → Browser
- Browser → Sends request with Origin header → API Server
- API Server → Adds CORS headers → Response
- Response → Validates headers → Browser
- Browser → Allows data access → Dashboard
Expected business outcome
The dashboard successfully retrieves and displays data from the analytics API without security errors, enabling a seamless user experience across different subdomains.
Limitations and checks
CORS is not a security feature for the server itself; it is a browser-level mechanism. If the server is misconfigured to allow all origins using a wildcard, any malicious site can read the API data. Verify this by inspecting the response headers in the browser network tab to ensure only trusted origins are present.