Everything You Need to Know About CORS (Cross-Origin Resource Sharing)

Modern web apps often fetch data from APIs hosted on different domains. But this can trigger security issues. That’s where CORS comes in.

Let’s break down what CORS is, how it works, and how to handle CORS errors like a pro.

---

🌍 What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature implemented by browsers that allows (or blocks) resources on a web page to be requested from another domain outside the domain from which the resource originated.

In short, it’s a way for servers to say:

“Yes, it’s okay for this domain to access my data.”

---

🔒 Same-Origin Policy (SOP)

Before CORS, browsers enforced the Same-Origin Policy:

• A script on example.com could only request data from example.com, not api.example.org
• This protected users from malicious scripts trying to act on their behalf

But this made modern cross-domain APIs difficult to use — enter CORS.

---

🔄 Cross-Origin Requests

A cross-origin request is any request from one domain (origin) to another.

Examples:

// Page hosted on: https://mywebsite.com
fetch("https://api.external-service.com/data")

This request is cross-origin — and whether it works depends on the API’s CORS policy.

---

⚙️ How CORS Works

1. Preflight Request (OPTIONS)

If the request uses custom headers or methods (like PUT, DELETE), the browser sends a preflight request to the server to ask for permission:

OPTIONS /data HTTP/1.1
Origin: https://mywebsite.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

2. Server Response

If allowed, the server replies with:

Access-Control-Allow-Origin: https://mywebsite.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

3. Actual Request

Once approved, the browser proceeds to make the actual request.

---

🧾 Key CORS Headers

1. Access-Control-Allow-Origin

Access-Control-Allow-Origin: https://mywebsite.com

Or use * for public APIs (not allowed with credentials).

2. Access-Control-Allow-Methods

Access-Control-Allow-Methods: GET, POST, PUT

3. Access-Control-Allow-Headers

Access-Control-Allow-Headers: Content-Type, Authorization

4. Access-Control-Allow-Credentials

Access-Control-Allow-Credentials: true

Allows cookies or auth headers.

---

❌ Handling CORS Errors

You’ll often see:

"Access to fetch at 'https://api.example.com' from origin 'https://myapp.com' has been blocked by CORS policy."

✅ Fixes:

• Make sure the API includes the correct CORS headers
• Match exact domain name and protocol (https/http)
• If needed, use a proxy to relay the request from your server

---

🛠 Real-World Example (Node.js + Express)

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://mywebsite.com',
  methods: ['GET', 'POST'],
  credentials: true
}));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS-enabled route!' });
});

app.listen(3000);

---

🙏 Thank You!

Thank you for reading!

I hope you enjoyed this post. If you did, please share it with your network and stay tuned for more insights on software development. I'd love to connect with you on LinkedIn or have you follow my journey on HashNode for regular updates.

Happy Coding!
Mitesh Kukdeja