Reading Time: 4 minutes

Introduction

Node.js is an open-source and cross-platform runtime used when executing JavaScript code on the server-side. One of the popular Node.js server frameworks is Express. Implementing CORS in Node.js helps you access numerous functionalities on the browser.

Express allows you to configure and manage an HTTP server to access resources from the same domain.

The three parts that form an origin are protocal, domain, and port.

Let’s say accessing images, videos, iframes, or scripts from another server. This means that the website is accessing resources from a different origin or domain. When building an application to serve up these resources with Express, a request to such external origins may fail. This is where CORS comes in to handle cross-origin requests.

Prerequisites:

To follow this blog along, prior knowledge of Node.js and Express is essential.

This blog will help you learn about the CORS with Express. So, let’s start to learn:

What is CORS?

CORS stands for Cross-Origin Resource Sharing. It allows us to relax the security applied to an API. This is done by bypassing the Access-Control-Allow-Origin headers, which specify which origins can access the API.

In other words, CORS is a browser security feature that restricts cross-origin HTTP requests with other servers and specifies which domains access your resources.

If you want know more about CORS and it’s policy, you can refer here.

How CORS works?

An API is a set procedure for two programs to communicate. This means that API resources are consumed by other clients and servers.

Here are two scenarios:

The client and the server have the same origin. In this example, accessing resources will be successful. You’re trying to access resources on your server, and the same server handles the request.

The client and server have a different origin from each other, i.e., accessing resources from a different server. In this case, trying to make a request to a resource on the other server will fail.

This is a security concern for the browser. CORS comes into play to disable this mechanism and allow access to these resources. It will add a response header access-control-allow-origins and specify which origins are permitted. CORS ensures that we are sending the right headers.

Setting up CORS with Express

Let’s create a very basic Express HTTP server endpoint that serves a GET response. Go ahead and install CORS alongside the following other packages using the below command.

npm i cors express nodemon

Creating a simple Express GET request

Below is a simple index.js express server.

const express = require('express');
const app = express();

    const ingredients = [
    {
        "id": "1",
        "item": "Bread"
    },
    {
        "id": "2",
        "item": "Eggs"
    },
    {
        "id": "3",
        "item": "Milk"
    },
    {
        "id": "4",
        "item": "Butter"
    }
];

app.get('/ingredients', (req, res) =>{
    res.send(ingredients);
});
app.listen(6069);

Run the server with npm nodemon. Navigate to http://localhost:6069/ingredients on your browser. You will be served with these ingredients text items.

In this example, cross-origin is allowed because you’re currently on the same domain, and you are executing this request from the same domain.

Let’s now try to get the ingredients using the fetch command.

I am going to execute that same request but from another site instead. In this case, I used https://www.section.io.

Open https://www.section.io on your browser and execute the following fetch request from the browser’s console using a Fetch API.

fetch("http://localhost:6069/ingredients").then(req => req.text()).then(console.log)

Make sure the server is up and running before performing the request above.

We are fetching the ingredients information from another origin domain. The origin of this URL is not the one allowed to receive this response from this server. Therefore, it will throw the below CORS error.

To solve this error, we need to add the CORS header to the server and give https://www.section.io access to the server response.

Include the following in your index.js file.

const cors = require('cors');
app.use(cors({
    origin: 'https://www.section.io'
}));

If you now perform the fetch command, it should work fine.

However, if a fetch request is made from another web page, it will fail and throw the following error.

This means that you only have access to our server’s resources. You can have an array of these multiple origins, as shown below.

const cors = require('cors');
app.use(cors({
    origin: ['https://www.section.io', 'https://www.google.com/']
}));

Nevertheless, the API can be public, and any cross-origin APIs and servers can access these resources. The code block below will ensure any page can access the ingredient resources.

app.use(cors({
    origin: '*'
}));

The Asterisk symbol will create the CORS header, and any origin can, therefore, get the response of this localhost server.

Since a specific origin is not defined here, app.use(cors()) will also get this done.

You can also have dynamic origins. These are whitelisted origins that have access to your API. This could be used to pull resources from a database.

You can even specify which routes of your server can be accessed.

app.get('/ingredients', cors(), (req, res, next) => {
    res.send(ingredients);
});

Conclusion:

When you deploy an application on the server, you should not accept requests from every domain. Instead, you should specify which origin can make requests to your server.

This way, you are able to block users who attempt to clone your site or make requests from an unauthorized servers. This is important an security measure. Check this CORS NPM registry and learn more on where to use CORS in your Express application.

Hey there, I am glad you have reached the end of this post. If you liked this post or have some questions or want to discuss something let me know in the comment section. 

For more info you can check:

https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/