DEV Community

David Meadows
David Meadows

Posted on

Explain CORS Like I'm Five

At a basic level, I think I understand CORS. I've read the wiki and have seen the diagrams. I have even been able to solve a couple of CORS issues I have had. However, I would love to hear simple explanations on the subject to get a different perspective. This will also help me explain the subject to other people who may not be familiar with the issues that arise with it.

Top comments (10)

Collapse
 
nvassos profile image
Nikolaos Vassos

When you want to get a toy from your friend's house, you have to ask your friend's mom for permission. CORS is like asking for permission when a website wants to get something from another website, like pictures or videos. If the other website doesn't say it's okay, then the first website can't get what it wants. It's like having a grown-up ask for permission before taking something that doesn't belong to them.

Collapse
 
dmeadows8585 profile image
David Meadows

Very nicely put. Brings back memories of my friends and I swapping Nintendo games. Some moms simply didn't care what was borrowed.

Collapse
 
ynn1k profile image
Yannik

No wonder why CORS was so hard to understand for you :D

Collapse
 
codesimple profile image
code-simple

best reply i think.

Collapse
 
diseyi profile image
Diseyi

Your box of toys are your endpoints, and your parents are the browser. As much as you like sharing your toys with your friends to play with, you parents won't allow. They have a rule, you need to give them the list of people who can share your toys, with to prevent any child coming to your house to get access to your toys. Now if you are really nice you can grant access to every child to access your toys, or you give them the list of your close friends you want to be able to access your toys.

So when a child comes and request for your toy to play with, your parent checks the list to know if they should be given the toy or not. This is what the browser does, the browser needs to be sure a particular website has permission to access the server it's making a request to. So it runs a preflight to check, if the client site has permission, it allows it access. If it doesn't have permission it doesn't grant the client side request and throws the CORS error.

Collapse
 
dmeadows8585 profile image
David Meadows

Very good explanation! Thanks for taking the time to detail that out.

Collapse
 
ash55 profile image
delirent

Could you give a real case example of when the site won't give permission?
This is the part I don't understand because if we made a website, usually it will allow or expect everyone to access it.

Collapse
 
diseyi profile image
Diseyi

So first, loading a webpage doesn’t produce CORS error. CORS error occurs when you are making a request to a website with a different domain or subdomain. Using the toys analogy, your siblings have access to your toys by virtue of living in the same house with you. 



Real life example: Imagine you are on a website “example.com”, and this website needs to fetch data it needs to display from a different domain “api.example.com”. Due to security restrictions by the browser, “example.com” won’t be granted access to get to data from “api.example.com” because they are of different domain. This returns a CORS error. “api.example.com” would need to explicitly grant access to “example.com” by including the proper CORS headers in its response to allow the request to succeed.

I hope this helps

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

Maybe my 5 year old granddaughter IQ is too high...

  • In the old days, when you requested anything from another site you would just get it.
  • So you could built a fancy website with basic HTML and link to other valuable resources
  • Then someone said: "I do not like it that everyone in the world is using my resources; because I pay for server time"
  • Then someone else said: "Lets write some extra server software, that checks what they request, and then we can deny access"
  • Legend has it, they first wanted the acronym KYFHOMFC (Keep Your F* Hands Of My F* Content)
  • But that was actually a swear word in some obscure language
  • So they chose Cross Origin Resource Sharing
Collapse
 
dmeadows8585 profile image
David Meadows

You got me with bullet #5. 🐐