Scribd
Upload
8 views10 pages

Understanding CORS: A Simple Guide

CORS, or Cross-Origin Resource Sharing, is a security feature in browsers that prevents unauthorized access to resources from different origins. When a frontend application tries to fetch data from a backend server, the browser checks if the server allows that origin through specific headers. To resolve CORS issues, developers must configure the backend to permit the correct origins and use appropriate headers.

Uploaded by

hammad.nntsoftware
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
8 views10 pages

Understanding CORS: A Simple Guide

CORS, or Cross-Origin Resource Sharing, is a security feature in browsers that prevents unauthorized access to resources from different origins. When a frontend application tries to fetch data from a backend server, the browser checks if the server allows that origin through specific headers. To resolve CORS issues, developers must configure the backend to permit the correct origins and use appropriate headers.

Uploaded by

hammad.nntsoftware
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