Intro
When you use a Content Delivery Network (CDN)
to host static assets for your website, like images
or Javascript files
, those files are being served from a different domain than your main website.
This difference in domain can cause security issues with modern web browsers.
Reason is that browsers hate it when you try to access some resources from a different server than your own website served from.
This is a policy of browsers called "Same origin policy".
What CORS has to do with this
In easy terms, CORS (Cross Origin Resource Sharing) is like a handshake between your website and CDN (could be other servers as well), saying it's okay to load resources from each other.
It acts as a security check to prevent malicious scripts from loading unauthorized resources.
If header of request contains a CORS then good ✅👍
otherwise bad, gets rejected👎❌
This meme I made to explain in easy terms:
Thats why you will see something written like crossorigin
in the cdn
links.
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
>
</script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
>
</script>
Conclusion
CORS help in allowing your website to access resources from different servers.
If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more upcoming content on JavaScript, React, and other Web Development topics.
For paid collaboration, you can mail me at: gmail
Connect with me on Twitter, LinkedIn and GitHub
Thank you for Reading :)
Top comments (0)