Skip to main content

Enable CORS in Nodejs | What Is CORS | How CORS Works

What Is CORS?
CORS stands for Cross-origin resource sharing.

Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

You only need to think about CORS when:
1.      API accessed by the browser
2.      API is hosted on a separate domain

How CORS Works?
CORS allows the server to explicitly whitelist certain origin and help to bypass the same-origin policy i.e.
var whitelist = ['https://code-sample.com''https://codefari.com']

If your server is configured for CORS, it will return an extra header with "Access-Control-Allow-Origin" on each response.
 
How to Enable CORS?
For enabling CORS on your server application, you need two things.
1.      First, you need to determine the origins of whitelist
2.      Second, you have to add the CORS middleware to the server

Here, I am explaining to you the steps to configure CORS on your Nodejs server.

Install the CORS npm package -

npm i cors

What Is CORS NPM?
CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.

Usage - Enable CORS Requests

After complete the installations, import these files
var express = require('express')
var cors = require('cors')
var app = express()


The default configuration option is the equivalent of:
{
    "origin""*",
    "methods""GET,HEAD,PUT,PATCH,POST,DELETE",
    "preflightContinue"false,
    "optionsSuccessStatus"204
 }
  

Note - A dangerous practice for writing origin:* in production.

To Configuring CORS for All Domains -

Example 1:-
var express = require('express')
var cors = require('cors')
var app = express()

app.get('/users/:id'cors(), function (reqres) {
  res.json({msg: 'This is CORS-enabled for all domains.'})
})

app.listen(3000function () {
  console.log('CORS-enabled web server listening on port 3000')
})

Example 2:
var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

app.get('/users/:id'cors(corsOptions), function (reqres) {
  res.json({msg: 'This is CORS-enabled for all domains.'})
})

app.listen(3000function () {
  console.log('CORS-enabled web server listening on port 3000')
})

To Configuring CORS for specific domains -

As an Example,
var express = require('express')
var cors = require('cors')
var app = express()

var whitelist = ['https://code-sample.com''https://codefari.com']

var corsOptions = {
  origin: function (origincallback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(nulltrue)
    } 
    else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

app.get('/users/:id'cors(corsOptions), function (reqres) {
  res.json({msg: 'This is CORS-enabled for a whitelisted domain.'})
})

app.listen(3000function () {
  console.log('CORS-enabled web server listening on port 3000')
})

Enabling CORS Pre-Flight:-

What Is Pre-Flight request?
The CORS requests require an initial OPTIONS request called the "pre-flight request".

Example 1:
var express = require('express')
var cors = require('cors')
var app = express()

app.options('/users/:id'cors()) // enable pre-flight request for DELETE request
app.del('/users/:id'cors(), function (reqres) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(3000function () {
  console.log('CORS-enabled web server listening on port 3000')
})

You can also enable pre-flight across-the-board like so:
app.options('*'cors()) // include before other routes

Example 2:
var express = require('express')
var cors = require('cors')
var app = express()

app.options('*'cors()) // enable pre-flight request for DELETE request
app.del('/users/:id'cors(), function (reqres) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(3000function () {
  console.log('CORS-enabled web server listening on port 3000')
})

Configuration Options:-
1.      origin: Configures the Access-Control-Allow-Origin CORS header. Possible values:
a.       Boolean - set origin to true to reflect the request origin, as defined by req.header('Origin'), or set it to false to disable CORS.
b.      String - set origin to a specific origin. Only requests from "http://domain.com" will be allowed.
c.       RegExp - set origin to a regular expression pattern which will be used to test the request origin. If it's a match, the request origin will be reflected.
d.      Array - set origin to an array of valid origins. Each origin can be a String or a RegExp.
e.      Function - set origin to a function implementing some custom logic. The function takes the request origin as the first parameter and a callback as the second.
2.      methods: Configures the Access-Control-Allow-Methods CORS header. Expects a comma-delimited string (ex: 'GET,PUT,POST') or an array (ex: ['GET', 'PUT', 'POST']).
3.      allowedHeaders: Configures the Access-Control-Allow-Headers CORS header. Expects a comma-delimited string (ex: 'Content-Type,Authorization') or an array (ex: ['Content-Type', 'Authorization']). If not specified, defaults to reflecting the headers specified in the request's Access-Control-Request-Headers header.
4.      exposedHeaders: Configures the Access-Control-Expose-Headers CORS header. Expects a comma-delimited string (ex: 'Content-Range,X-Content-Range') or an array (ex: ['Content-Range', 'X-Content-Range']). If not specified, no custom headers are exposed.
5.      credentials: Configures the Access-Control-Allow-Credentials CORS header. Set to true to pass the header, otherwise it is omitted.
6.      maxAge: Configures the Access-Control-Max-Age CORS header. Set to an integer to pass the header, otherwise it is omitted.
7.      preflightContinue: Pass the CORS preflight response to the next handler.
8.      optionsSuccessStatus: Provides a status code to use for successful OPTIONS requests, since some legacy browsers (IE11, various SmartTVs) choke on 204.

Is enabling CORS safe?
The author of the Fetch/CORS spec goes into a bit more detail in a related blog posting: It is completely safe to augment any resource with Access-Control-Allow-Origin: * as long as the resource is not part of an intranet (behind a firewall).

For resources where data is protected through IP authentication or a firewall, using the CORS protocol is unsafe. Otherwise using Access-Control-Allow-Origin: * is safe.

For details and download example on the CORS configurations, read this article.
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'.   Follow the below steps, Steps 1 –  Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like  – NPM Command  1 ->   npm install crypto-js --save NPM Command  2 ->   npm install @types/crypto-js --save Steps 2  - Add the script path in “ angular.json ” file. "scripts" : [                "../node_modules/crypto-js/crypto-js.js"               ] Steps 3 –  Create a service class “ EncrDecrService ” for  encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using  encrypt and decrypt get/set methods . import  {  Injectable  }  from   '@angular/core' ; import   *   as   CryptoJS   from   'crypto-js' ; @ Injectable ({    providedIn:   'root' }) export   class   EncrDecrS