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.
I was an electrical engineer in a past life who was converted into a software engineer. I am humbled daily by this career path. It's like drinking from a firehose at times, but its my passion.
Location
Jacksonville, Fl
Education
University of Florida and University of North Florida
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.
I was an electrical engineer in a past life who was converted into a software engineer. I am humbled daily by this career path. It's like drinking from a firehose at times, but its my passion.
Location
Jacksonville, Fl
Education
University of Florida and University of North Florida
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.
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.
Online since 1990 Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)
I was an electrical engineer in a past life who was converted into a software engineer. I am humbled daily by this career path. It's like drinking from a firehose at times, but its my passion.
Location
Jacksonville, Fl
Education
University of Florida and University of North Florida
12-year-old creator of Wizard.AI and Co-Founder of AA Web Studio (aaweb.neocities.org). We build fast, modern websites for small businesses. Passionate about making AI fun and the web accessible.
CORS is essentially you asking your mom for the last cookie. In terms of websites, one website asks another for its photos, videos, and more. But in AI terms, the frontend usually asks to connect to the backend. CORS is your grandma who says, "Yes dear! Of course you can have the last cookie"
We're a place where coders share, stay up-to-date and grow their careers.
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.
Very nicely put. Brings back memories of my friends and I swapping Nintendo games. Some moms simply didn't care what was borrowed.
No wonder why CORS was so hard to understand for you :D
Jadikan crome web saya menang di engine slot menang kalaw main
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.
Very good explanation! Thanks for taking the time to detail that out.
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.
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
Maybe my 5 year old granddaughter IQ is too high...
You got me with bullet #5. 🐐
CORS is essentially you asking your mom for the last cookie. In terms of websites, one website asks another for its photos, videos, and more. But in AI terms, the frontend usually asks to connect to the backend. CORS is your grandma who says, "Yes dear! Of course you can have the last cookie"