DEV Community

Victoria Lo
Victoria Lo

Posted on • Originally published at lo-victoria.com on

2

Introduction to Cross Origin Resource Sharing (CORS)

In web development practice, it is common for web apps to separate their front-end from back-end services. As such, accessing resources from the back-end requires the understanding of Cross-Origin Resource Sharing or CORS for short. It is an essential part of understanding web infrastructure for developers.

Hello everyone! In this article, let's discuss CORS, why we need it and how we can implement it. We'll also look at related concepts such as the Same-Origin Policy.

First, an experiment

If you are on a website (i.e. google) and then on your browser inspector, try to send a request to, let's say, an API like so:

const response = await fetch("https://tea-api-vic-lo.herokuapp.com/tea);
Enter fullscreen mode Exit fullscreen mode

What do you think will happen?

The console would return the following error message:

block.PNG

Why is this so? The answer is because of the Same-Origin Policy.

The Same-Origin Policy

There's a security policy that browsers follow. It's called the Same-Origin Policy, which basically states only resources from the same domain, host and port can interact with each other.

For example, example.com can retrieve data from its server at example.com because they share the same domain. Any of its subdomains would also be accessible (i.e. example.com/page1 or example.com/page1/page2).

However, resources from domains like api.example.com or google.ca would not be accessible to example.com due to this security policy.

HAProxy-CORS-diagram-2.png

Importance of Same-Origin Policy

As you may have guessed, this policy is put in place for security purposes. Imagine if there's no such restriction; a malicious site can simply GET any data from any site resulting in cross-site request forgery(CSRF) attacks.

On the other hand, this policy may be too restrictive because some web apps may need to fetch resources from several different servers. In that case, this is where CORS (Cross-Origin Resource Sharing) comes in.

What's CORS?

As the name suggests, it enables websites to access resources from servers that does not share its domain, host or port. The whitelisted website is usually passed in the Access-Control-Allow-Origin request header, which will tell the server that it is okay to send and share its data to this website.

For example, if we set Access-Control-Allow-Origin to example.com, it means that this website can now have access to api.example.com.

HAProxy-CORS-diagram-1.png

An Example

My Tea App, which fetches data from my Tea API needs to be whitelisted so that the app is allowed access the API's data. Let's implement a CORS middleware to achieve this.

Step 1: Install cors

Let's first install the npm package called cors.

npm install cors
Enter fullscreen mode Exit fullscreen mode

Step 2: Import

In the server.js file, we import cors:

const cors = require("cors");
Enter fullscreen mode Exit fullscreen mode

Step 3: Whitelist

Then below the app initialization, const app = express() line, add:

app.use(cors({ origin: /(.*\.)?victoria-lo.github\.io.*/ }));
Enter fullscreen mode Exit fullscreen mode

This line basically tells the API that any domain with victoria-lo.github.io is whitelisted from the Same-Origin Policy. Hence, my app, which is hosted at victoria-lo.github.io/Hashtag-TEA is allowed to fetch and load data from my API which is at an entirely different domain (tea-api-vic-lo.herokuapp.com/).

Conclusion

And that's the gist of what CORS is all about! Thanks for reading. Please leave a like and share your thoughts in the comments below. I hope it has been a helpful read. Feel free to read more about what we've discussed today in the See Also section below. Cheers!


See Also

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay