Why do we need CORS to access CDN links?

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:

That's 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 and links such as CDN.

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 :)