Simple Steps to Fix CORS Error While Connecting a Front-End App to a Node.js/Express.js App

Hemant Jain
Dec 29, 2020 · 4 min read
Typical CORS error
Typical CORS Error

Ever came across this error?

Access to XMLHttpRequest at ‘http://localhost:8000/users/' from origin ‘http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The ‘Access-Control-Allow-Origin’ header has a value ‘http://localhost:3000/' that is not equal to the supplied origin.

If yes, here are simple steps that you need to follow in order to address this issue. First things first, if you wanna know about CORS policy and its advantages, please refer to this link. In short, CORS helps in making the application more secure.

Note: I presume that your Node.js app is already built and I will only be providing some steps to fix the error.

Step 1:

Open your Node.js application in your favorite IDE and go to the root directory. Open the terminal and type:

npm install cors

and press enter. Cors will be installed on your app.

Step 2:

Now let’s configure the cors module. In your Node.js app, go to the folder containing the file in which all the routes are defined. In the same folder(not necessarily, but only for convenience), create a new file and name it ‘cors.js’. Now add the following code to cors.js:

//cors.js

In the snippet given above, you may notice a constant named ‘allowedOrigins’ which contains all the URLs which may access the back-end app. In our case, we need to mention the URL where our front-end app is hosted, which is usually localhost during development. Make sure that you mention correct port (3000 in the example). Also, don’t forget to add the second URL in which you need to mention your computer’s name.

Don’t know what your computer’s name is? Not a problem, just open the command prompt and type “hostname” and press enter. The name of your computer will be displayed.

Step 3:

Now we need to configure the routes. Let us say we want to access the sign up API from front-end app. Firstly, we will update our app.js(or index.js whichever is the starting point of your app). Please add following lines of code to your app.js

//app.js

Similary modify the authRoutes.js file as shown below:

//authRoutes.js

What have we done here? Firstly, we have required the cors.js file which we had created earlier. Then we have defined the sign-up endpoint beginning with options() which simply takes care of CORS preflight. I have used POST method to sign-up but many developers prefer using PUT, and it is your call which you wanna go with. The corsWithOptions function makes sure that the request is originated from one of the sources which are listed in allowedOrigins (in cors.js). Similarly, you may modify all the route endpoints by adding CORS policy just as we did for sign-up. Three major points to keep in mind are:

  • Require cors from cors.js
  • Use options at the beginning of each end-point
  • For each type of request, you need to use corsWithOptions. You may also use cors.cors() in place of cors.corsWithOptions() if you wanna allow the requests originating from all origins.

The back-end app is now ready to serve the client app. The sign-up endpoint can be accessed at ‘http://localhost:{port}/auth/users/signup’.

Additional Resources:

You might wanna refer to a few links in case you like going deep into the topic.

The Startup

Get smarter at building your thing. Join The Startup’s +793K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Hemant Jain

Written by

A passionate Node.js developer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store