CORS Introduction — Why Browsers Restrict Cross-Origin Requests

In this tutorial, you will learn about CORS Introduction. We cover key concepts, practical examples, and best practices to help you master this topic.

CORS is a browser security mechanism that controls how web pages can request resources from a different origin, balancing the need for open access with protection against malicious sites.

What You'll Learn

• What CORS is and why browsers enforce it
• The difference between same-origin and cross-origin requests
• How CORS uses HTTP headers to grant or deny access

Why It Matters

Every time your frontend JavaScript calls an API on a different domain, CORS rules apply. Misconfiguring CORS blocks legitimate users or exposes your API to abuse.

flowchart LR
    A["https://myapp.com"] -->|"JavaScript Request"| B["https://api.example.com"]
    B --> C{"CORS Headers\nPresent?"}
    C -->|"No"| D["Browser Blocks\nRequest"]
    C -->|"Yes: Access-Control-Allow-Origin: *"| E["Request Allowed"]
    style C fill:#dbeafe,stroke:#2563eb

Real-World Use

Your React app at https://dashboard.durga-antivirus.com needs to fetch threat data from https://api.durga-antivirus.com. Without CORS, the browser blocks this request. The API server must include Access-Control-Allow-Origin: https://dashboard.durga-antivirus.com in its response.

Code Examples

// CORS error example
fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(err => console.log('CORS Error:', err.message));

Expected output (without proper CORS headers):

CORS Error: Failed to fetch (CORS blocked)

# Check CORS headers manually
curl -H "Origin: https://myapp.com" \
  -H "Access-Control-Request-Method: GET" \
  -I https://api.example.com/data

Expected output includes:

access-control-allow-origin: *

Common Mistakes

1. Using CORS as an Authentication Mechanism

CORS controls access, not authentication. An open CORS policy doesn't mean anyone can authenticate.

2. Setting Access-Control-Allow-Origin: * with Credentials

Wildcard origins are not allowed when credentials: 'include' is used.

3. Forgetting Preflight Handling

Non-simple requests need OPTIONS preflight handling on the server.

4. Ignoring CORS in Development

Test CORS in production-like environments; localhost often bypasses restrictions.

5. Misunderstanding Origin vs Same-Origin

Port :3000 and :8080 are different origins even on the same host.

Practice Questions

1. What does CORS stand for and what does it do?
2. What is the same-origin policy?
3. How does a server allow cross-origin requests?
4. What is a preflight request?
5. Why can't browsers enforce CORS for server-to-server requests?

Answers:

1. Cross-Origin Resource Sharing — allows controlled cross-origin access.
2. A security policy that prevents a page from accessing resources on a different origin.
3. By including Access-Control-Allow-Origin headers in responses.
4. An OPTIONS request sent before complex requests to check permissions.
5. CORS is enforced by browsers, not servers. Server-to-server requests have no CORS restrictions.

Challenge: Create a simple Express server that allows CORS from http://localhost:3000 and test it with a fetch from a different port.

FAQ

What's Next

Learn about the Same-Origin Policy in depth, then explore Simple vs Preflight Requests.