Steps to Set-up Project and Install CORS Module
Step 1: Create a Node.js application and name it gfg-cors using the following command.
mkdir gfg-cors && cd gfg-cors
npm init
Step 2: Install the dependency modules using the following command.
npm i express cors
Step 3: Create client directory and server.js file in the root directory. Then create index.html and script.js in the client directory.
Project Structure:
Updated dependencies in the package.json file.
"dependencies": {
"cors": "^2.8.5",
"express": "^4.19.2"
}
Example: Write down the following code in the index.html, script.js, and server.js files.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>gfg-cors</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
// Filename - script.js
fetch('http://localhost:5000/gfg-articles')
.then((res) => res.json())
.then((gfg_articles) => console.log(gfg_articles));
// Filename - server.js
// Requiring module
const express = require('express');
const cors = require('cors');
// Creating express app object
const app = express();
// CORS is enabled for all origins
app.use(cors());
// Example api
app.get('/gfg-articles',
(req, res) => res.json('gfg-articles'));
// Port Number
const port = 5000;
// Server setup
app.listen(port, () => `Server running on port ${port}`);
Note: If you want to allow the selected origins to access your site then you need to configure cors as shown below.
Add this cors configuration in the server
// CORS is enabled for the selected origins
let corsOptions = {
origin: [ 'http://localhost:5500', 'http://localhost:3000' ]
};
Example: Updated server code with cors configuration.
// Filename - server.js
// Requiring module
const express = require('express');
const cors = require('cors');
// Creating express app object
const app = express();
// CORS is enabled for the selected origins
let corsOptions = {
origin: [ 'http://localhost:5500', 'http://localhost:3000' ]
};
// Using cors as a middleware
app.get('/gfg-articles',cors(corsOptions),
(req,res) => res.json('gfg-articles'))
// Port number
const port = 5000;
// Server setup
app.listen(port, () => `Server running on port ${port}`);
If you just want to allow a particular origin to access your site, then corsOptions will be as follows:
let corsOptions = {
origin: 'http://localhost:5500'
};
Step to Run the Application: Run the server.js using the following command.
node server.js
Output: Open index.html and then check the following output in the console.
How to Deal with CORS Error in Express Node.js Project ?
CORS, also known as Cross-Origin Resource Sharing, should be enabled if you want to make a request between your client and server when they are on different URLs.
Let us consider client to be on http://localhost:5500 and the server on http://localhost:5000. Now if you try to make a request from your client to the server you will get the error stating that blocked by the CORS policy.