What You Need To Know About CORS and Vue.js To Increase Browser Security

Boost your browser-side protection with the CORS framework

Photo by Headway on Unsplash.

I was developing a frontend application this week and got some CORS errors. I’ve run into these errors before, but I never really thought about why cross-domain sharing was dangerous.

I knew it had something to do with security, but the details were a bit vague to me. So, I decided to research it and write a deep-dive article on CORS with some Vue.js examples.

Let’s dive in

What Is CORS?

CORS stands for Cross-Origin Resource Sharing. It is a mechanism that allows servers to indicate what other domains can access their resources.

A resource can be anything. An image, an API request, or even loading an external iframe.

I created a diagram outlining a (simplified) real-world CORS scenario that might occur when scouring the internet for cat pictures:

Photo by the author.

Building a CORS Example