How to solve CORS issue in NodeJS

This article is originally written here for my blog where it is uploaded with images -> https://easyontheweb.com/how-to-solve-cors-issue-in-nodejs/

So, I’ve recently started working on my first micro-services based project and one of the first things that I encountered in it was the dreaded CORS error that we usually see on the client-side. Therefore, I decided to myself take a little deeper look into what CORS was and how does it work and then decided to impart then knowledge with this article as well. So, in this article we’ll see what CORS is, how and when that error we see occurs and also how do we solve the CORS issue in a NodeJs(express) application.

If you’ve been doing web development for a while now there is a high probability that you must have faced a CORS issue one time or the other. Even though it is a recurring thing, I myself never tried to dig deep into it until a couple of days back.

What is CORS ?
One of the simplest and most important things to understand the error is to first understand what CORS is anyway?

CORS stands for cross-origin-resource-sharing and well, if you read carefully, the name actually gives away what CORS is. It is actually a protocol that governs the sharing of data across different origins, i.e, if you are requesting a resource from one origin while you are at a different origin yourself (your code, obviously), then the transfer of that resource will be governed by the CORS protocol.

Origin? What is an origin now? An origin can refer to a domain name, a subdomain, a different scheme(HTTP/HTTPS) or a different port on the same machine as well.

What happened to me in my current project was that I had two different services – one running on PORT 4000 and one on PORT 4001 and I had a React Application running on 3000, so when I made a request to a different PORT I got the CORS error. Why? Because different ports on the same machine are considered as different origins.

In the same way if you try to access a different service or try to fetch data from a different web application running on a different origin than your web application you are bound to hit the CORS error for ‘No-Access-Control-Allow-Origin’.

Call from origin A to origin B
This is a pictorial representation of what actually happens during a call to a different origin. The browser actually sends something called a pre-flight call first to the different origin in order to make sure that the call is safe to make and that resource sharing is allowed from Origin B. If it is allowed, origin B then sets some headers and sends them back to origin A which then allows origin A to make the actual request that it intended to make.

In case the appropriate headers are not set by Origin B, we see the CORS error that we usually see on the browser.

When do we not get the error?
As I mentioned in the last section, we will not get a CORS error when the origin we are asking the resource from sets and sends back certain headers. The most important one that usually fixes everything is called ‘Access-Control-Allow-Origin’ , when this option is set as * in the headers and is returned by the second origin that means that that origin is allowing itself to share it’s resources with any other origin. This * basically is a placeholder for all. In place of * the value can represent any origin that it wants to share it’s resources with.

Whatever maybe the case, if you want to gets resources from the other origin , you need to make sure that your origin is a part of the allowed origins in the headers being set by the other origin.

There are a whole lot of other methods and headers involved in all this as well but we won’t be discussing them here as this one is the most important one and the concept behind all others is also basically the same.

To learn more about all the HEADERS possible you can check the following link -> https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#CORS

How to solve CORS issue in NodeJS (express)
So, the way I solved this CORS issue in my microservices application was by using an NPM package by the name of cors . This is a very easy package to use for your server side origin and CORS management.

The easiest way (but also the most unsafe ) is to just use it as a middleware directly something like this :-

Why did I call it easy but unsafe? The easy part is there for you to see, it is just a couple of lines of change but the part of being unsafe is because here we do not configure any CORS policies or origin or any config. of that sort. In fact, the only thing we actually do here is set ‘Access-Control-Allow-Origin’ as * so that any other origin can ask for resources from our service.

The cors package though is very powerful and I highly recommend you to go through it’s documentation as they provide all sorts of ways for you to whitelist specific origins, use specific HEADERS and to configure pre-flight requests as well. Everything can be done pretty easily using this package for your service.

Also, even though I’ve never done it myself but after some research I found that the go-to config settings to enable CORS for Nginx is this -> https://enable-cors.org/server_nginx.html

So, as you found out in this article that the CORS error that we see on requests is actually not a bug or something but is very much the expected behaviour from a security point of view and the only thing you can do is configure your server side in order to whitelist origins and enable resource sharing (or use plugins and chrome in non-secure ways which we won’t talk about 😛 ).

So, the next time you face this issue, you know that you need to enable access for resource sharing from the target origin. If you have access to that codebase, you know how to do it and if you don’t have access to that codebase, you can ask someone who does or raise a ticket or something to enable CORS from that side.