Scribd
Upload
39 views10 pages

Understanding CORS: A Simple Guide

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
39 views10 pages

Understanding CORS: A Simple Guide

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

CORS Explained Like

You’re 5 (But With


Code)

@ sanuj bansal
Meet the Problem
You’re building a website: [Link]
Your data is on: [Link]
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:
[Link] → [Link]

Cross origin:
[Link] → [Link]

[Link] → [Link]
Different origins trigger CORS checks!

@ sanuj bansal
How Does CORS Work?
[Link] send a request from [Link]
[Link] asks the server:
“Hey, can this origin access your resources?”
[Link] must respond with this header:

If yes — request goes through


If no — blocked!

@ sanuj bansal
What If It’s a POST or
Custom Header?
[Link] things get a little fancy…
[Link] browser sends a preflight request using OPTIONS:

The server must respond like:

Then the real request goes through.

@ sanuj bansal
Fixing CORS in Code
([Link] 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