DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for πŸ”₯ If you are a developer, you must know how CORS works πŸ”₯
Kevin Comba
Kevin Comba

Posted on

πŸ”₯ If you are a developer, you must know how CORS works πŸ”₯

Here’s a high-level flow on how browsers initiate that extra β€œpreflight” request to determine whether they have permission to perform cross-origin requests.

What is CORS anyway? CORS stands for Cross-Origin Resource Sharing, and it’s a protocol that allows servers to receive requests from different domains.

Developers often make external API requests to fetch data from external servers. Sometimes these servers could be from different domains too.

Example:
πŸ‘‰ My app in kelcho.com making a GET request to kelcho.com is a same-origin request
πŸ‘‰ My app in kelcho.com making a GET request to google.com is a cross-origin request

But these cross-domain requests are restricted by the browser ❌

Once developers have configured CORS on the server to accept requests from other domains the browser will kick in a preflight check βœ…

It is to verify whether resource sharing is allowed on the destination server. The preflight request uses the HTTP method OPTIONS.

I’ll post a detailed visual guide on how it works under the hood soon✌️

Keep growing. Keep learningπŸ’ͺ

Top comments (1)

Collapse
andrewbaisden profile image
Andrew Baisden

CORS errors used to confuse me and give me such long headaches. But they are fairly straightforward to overcome when you know how 😁

🌚 Life is too short to browse without dark mode