1. Introduction to CORS

If you are a frontend developer, you have probably seen this error:

Blocked by CORS policy

This error is one of the most confusing issues for beginners.

CORS errors appear even when:

  • API is working

  • Backend is correct

  • Internet is fine

So why does it happen?

Let’s understand CORS step by step.

2. What Is CORS?

CORS stands for Cross-Origin Resource Sharing.

It is a browser security feature that controls how resources are shared between different origins (domains).

Simple Definition:

CORS decides whether a frontend website is allowed to access an API from another domain.

3. What Is an Origin?

An origin is defined by three things:

  1. Protocol (http / https)

  2. Domain

  3. Port

Example:

https://example.com:3000

If any one of these is different, the origin is different.

4. Same-Origin Policy (SOP)

Before CORS, browsers followed the Same-Origin Policy.

Same-Origin Policy Means:

A web page can only access resources from the same origin.

Example:

Frontend: https://example.com API: https://api.example.com

❌ Different origin → Blocked by browser

5. Why Same-Origin Policy Exists

Same-Origin Policy protects users from:

  • Data theft

  • Session hijacking

  • Malicious scripts

  • Unauthorized API access

Without SOP, any website could:

  • Read your bank data

  • Access private APIs

  • Steal cookies

6. What Problem CORS Solves

Modern applications use:

  • Separate frontend

  • Separate backend

  • Third-party APIs

CORS allows controlled relaxation of Same-Origin Policy.

So instead of blocking everything, browsers ask:

“Is this API allowed to share data with this website?”

7. How CORS Works (High-Level)

  1. Browser sends request

  2. Browser checks origin

  3. API sends CORS headers

  4. Browser allows or blocks response

Important:
CORS is enforced by the browser, not the server.

8. Example Without CORS

Frontend:

http://localhost:3000

API:

http://localhost:8000

Request:

fetch("http://localhost:8000/api/data")

❌ Browser blocks response → CORS error

9. Example With CORS

API response headers:

Access-Control-Allow-Origin: http://localhost:3000

✅ Browser allows response

10. Common CORS Error Message

Access to fetch at 'API_URL' from origin 'FRONTEND_URL' has been blocked by CORS policy

This means:

  • Browser rejected the response

  • Server did not allow your origin

11. Important CORS Headers

🔹 Access-Control-Allow-Origin

Defines allowed domains

Access-Control-Allow-Origin: *

or

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

🔹 Access-Control-Allow-Methods

Allowed HTTP methods

GET, POST, PUT, DELETE

🔹 Access-Control-Allow-Headers

Allowed request headers

Content-Type, Authorization

🔹 Access-Control-Allow-Credentials

Allows cookies/auth headers

true

12. Preflight Request (OPTIONS)

Some requests trigger a preflight check.

Browser sends:

OPTIONS request

This checks:

  • Allowed methods

  • Allowed headers

  • Permissions

If preflight fails → request blocked.

13. When Preflight Happens

Preflight occurs when:

  • Method is PUT, DELETE, PATCH

  • Custom headers are used

  • Authorization header exists

  • Content-Type is not simple

14. Why Frontend Faces API Errors

Frontend faces CORS errors because:

❌ Backend didn’t allow origin
❌ Missing CORS headers
❌ Wrong HTTP method
❌ Authorization header blocked
❌ Cookies not allowed

15. Very Important Point

🚨 CORS errors never occur in Postman or backend testing tools

Because:

  • CORS is browser-only

  • Servers don’t block themselves

That’s why API works in Postman but fails in browser.

16. CORS vs Backend Security

Feature CORS Backend Security
Enforced by Browser Server
Purpose Resource sharing Data protection
Blocks Frontend response Request processing

17. How to Fix CORS Errors (Backend)

Example in Node.js (Express)

app.use(cors());

Example in PHP

header("Access-Control-Allow-Origin: *");

Example in CodeIgniter 4

$response->setHeader('Access-Control-Allow-Origin', '*');

18. Fixing CORS with Credentials

If using cookies or auth headers:

Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Credentials: true

❌ * cannot be used with credentials

19. Common Mistakes in CORS

❌ Using * with credentials
❌ Forgetting OPTIONS route
❌ Missing headers in error responses
❌ Allowing everything blindly

20. Is Disabling CORS Safe?

❌ NO

Disabling CORS:

  • Creates security risks

  • Exposes APIs

  • Allows misuse

Always configure CORS properly.

21. CORS in Single Page Applications (SPA)

SPAs like:

  • React

  • Angular

  • Vue

Commonly face CORS because:

  • Frontend & backend run separately

  • Different ports/domains used

22. Proxy as a CORS Solution

Frontend proxy:

  • Sends request from same origin

  • Avoids browser restriction

Used mainly in:

  • Development

  • Testing

23. CORS and APIs

Public APIs:

  • Allow all origins

  • Rate-limited

Private APIs:

  • Restrict origins

  • Use auth headers

24. CORS and Security Best Practices

✔ Allow specific origins
✔ Limit methods
✔ Validate headers
✔ Use HTTPS
✔ Avoid wildcard in production

25. Who Needs to Understand CORS?

  • Frontend developers

  • Backend developers

  • Full-stack developers

  • API developers

  • DevOps engineers

26. Summary

CORS is a browser security mechanism that controls cross-origin API access. Frontend applications face CORS errors because browsers block responses when APIs don’t explicitly allow them. Understanding CORS helps developers fix API errors, improve security, and build scalable web applications.

27. Final Words

If your frontend works in Postman but fails in the browser, CORS is the reason. Learn it once, and you’ll avoid countless debugging hours in the future.