Scribd
Upload
9 views10 pages

CORS Explained

The document explains Cross-Origin Resource Sharing (CORS) using a simple analogy of a friend’s mom protecting cookies. It details how CORS works by requiring the server to grant permission for different origins to access resources, and describes the process of handling requests, including preflight checks for POST requests. Additionally, it offers quick tips for fixing CORS issues in code and emphasizes the importance of proper configuration and security practices.

Uploaded by

ecb20060
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views10 pages

CORS Explained

The document explains Cross-Origin Resource Sharing (CORS) using a simple analogy of a friend’s mom protecting cookies. It details how CORS works by requiring the server to grant permission for different origins to access resources, and describes the process of handling requests, including preflight checks for POST requests. Additionally, it offers quick tips for fixing CORS issues in code and emphasizes the importance of proper configuration and security practices.

Uploaded by

ecb20060
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

CORS Explained Like

You’re 5 (But With


Code)

@ sanuj bansal
Meet the Problem
You’re building a website: http://frontend.com
Your data is on: http://backend.com
You try to fetch data from the backend...
And boom — you get this:

@ sanuj bansal
What Just Happened?

Think of it like this:


You go to your friend’s house to get cookies.
But the friend’s mom (the browser) stops you and says:

“You’re not from this house. Do you have permission?”


That’s CORS — Cross-Origin Resource Sharing.

The browser is just protecting your friend’s cookies.

@ sanuj bansal
What is an “Origin”?

Origin = Protocol + Domain + Port

Same origin:
http://site.com:80 → http://site.com:80

Cross origin:
http://site.com → http://api.site.com

http://localhost:3000 → http://localhost:5000
Different origins trigger CORS checks!

@ sanuj bansal
How Does CORS Work?
1.You send a request from frontend.com
2.Browser asks the server:
“Hey, can this origin access your resources?”
1.Server must respond with this header:

If yes — request goes through


If no — blocked!

@ sanuj bansal
What If It’s a POST or
Custom Header?
1.Now things get a little fancy…
2.The browser sends a preflight request using OPTIONS:

The server must respond like:

Then the real request goes through.

@ sanuj bansal
Fixing CORS in Code
(Express.js Example)

@ sanuj bansal
Fixing CORS in Spring
Boot

@ sanuj bansal
Quick CORS Tips

✅ CORS is a browser-side security feature


✅ CORS is not a server bug
✅ Don’t use * in production (wildcard = risky)
✅ Use proxy during development (like Vite/React proxy
option)
✅ Backend must explicitly allow frontend origin
✅CORS = Browser asking “Do you have permission to access
this origin?”

You fix CORS by:


✔️Configuring backend to allow the right origin
✔️Using proper headers
✔️Testing with browser tools (check network tab)

@ sanuj bansal
Follow For More
Such Content !

Sanuj Bansal
Senior Developer

You might also like