What is CORS?

Brief Answer

CORS (Cross-Origin Resource Sharing) is a browser security policy that prevents web pages from making requests to other domains without permission. Protects users from data theft. 🛡️

// ❌ CORS Error:
// Site example.com tries to request data from api.other.com
fetch('https://api.other.com/data')
  .then(response => response.json())
  .catch(error => console.log('CORS error!')); // Blocked by browser
 
// ✅ Solution — server must allow request

Full Answer

CORS is like a security guard at a building entrance who checks if you’re allowed to enter and take things from there. Without permission — no way! 🚫

What is “Same-Origin”

Browser considers requests “same-origin” if they match:

Protocol (http/https)
Domain (example.com)
Port (80/443)

// ✅ Same origin:
// https://example.com/page1
// https://example.com/page2
 
// ❌ Cross-origin:
// https://example.com ❌ https://api.com
// http://example.com ❌ https://example.com  
// https://example.com ❌ https://example.com:8080

When CORS Blocks

Simple Request

// ❌ Blocked if server doesn't allow:
fetch('https://api.other.com/users')
  .then(response => response.json())
  .catch(error => {
    console.log('CORS blocks request!'); // Error in console
  });

Why It Blocks

// ❌ Problem — user protection:
// Malicious site evil.com shouldn't 
// steal data from bank.com!
 
// CORS requires explicit server permission

How CORS Works

Preflight Request

// For complex requests browser first sends OPTIONS:
 
// 1. Browser: OPTIONS /api/data (preflight request)
// 2. Server: "Allowed!" (Access-Control-Allow-Origin: *)
// 3. Browser: GET /api/data (real request)
// 4. Server: Sends data

CORS Headers

// Server must send headers:
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization

Solving CORS Issues

Server Side

// ✅ Server allows:
// Access-Control-Allow-Origin: * (all domains)
// Or specifically:
// Access-Control-Allow-Origin: https://example.com

During Development

// ✅ For development:
// 1. Use proxy server
// 2. Disable CORS in browser (only for testing!)
// 3. Use browser extensions

Common Mistakes

Confusing with Network Errors

// ❌ Mistake — think server returned error:
fetch('https://api.other.com/data')
  .catch(error => {
    // It's CORS blocking, not server!
  });
 
// ✅ Correct — check Network tab in DevTools

Ignoring Security

// ❌ Bad — allow everyone:
// Access-Control-Allow-Origin: * 
// For sensitive data!
 
// ✅ Better — restrict to specific domains

Simple Rules

Same origin — protocol, domain, port must match ✅
CORS blocks — requests to other domains without permission 🚫
Preflight — complex requests checked first 🎯
Headers — server must send CORS headers 📬
Security — protects from user data theft 🔐

Understanding CORS helps solve API request issues and create secure web applications! 💪

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪