blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS problem in browser /node js.

By default the browser is disabled the cross-origin-resources-share for the purpose of security problem. The browser try to maintain (block) the unwanted use of syncing resouces by other end.


If you run this code in browser console which is given below

	//if you run this code in console browser we get an error of CORS No 'Access-Control-Allow-Origin' header is present on the requested resource
	const xhr = new XMLHttpRequest()
	xhr.onreadystatechange = () => {
	if (xhr.readyState === 4) {
	xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
	}
	}
	xhr.open('GET', 'https://facebook.com')
	xhr.send()

view raw .html hosted with ❤ by GitHub

How to  resolve problem "blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

If you are using google chrome browser then go to  extension of google chrome and install "cors plugin". Link given below.

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

After installing "cors plugin" then "enabled it" now you request above code, Hence we not get any error of  "blocked by cors policy".

Genuine rule to bypass the problem of "blocked by cors policy"

 Simply go to  function of request and response block and paste the given below code.

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); res.setHeader('Access-Control-Allow-Credentials', true);

Let's take example to use the "res.setHeader" method.

prerequisite install

npm i express
npm i body-parser
npm i path
now ready to run this code  "node  filename.js"

	// prerequisite install
	// npm i express
	// npm i body-parser
	// npm i path
	// now ready to run this code "node filename.js"
	var express = require('express');
	var bodyParser = require('body-parser');
	var path = require('path');
	var app = express();
	/*
	var logger = function(req, res, next){
	console.log('logging...');
	next();
	}
	app.use(logger);
	*/
	//body parser middileware
	//view engine
	app.set('view engine', 'ejs');
	app.set('views', path.join(__dirname, 'views'));
	app.use(bodyParser.json());
	app.use(bodyParser.urlencoded({extended: false}));
	//set stati path
	app.use(express.static(path.join(__dirname, 'public')));
	var users =[
	{ id : 1,
	first_name : 'john',
	last_name : 'doe',
	email : 'johndoe@gmail.com',
	},
	{
	id : 2,
	first_name : 'jill',
	last_name : 'jackson',
	email :'jjackson@gmail.com',
	}
	]
	app.get('/',function(req, res){
	//we can add here to resolve the problem of cors policy
	///////////////////////////////////////////////
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
	res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
	res.setHeader('Access-Control-Allow-Credentials', true);
	//////////////////////////////////////////////
	res.render('index', {
	title: 'Customers',
	users : users
	});
	// res.send('hello world');
	// res.json(person);
	});
	app.listen(3000, function(){
	console.log("server is started on 3000");
	});

view raw .js hosted with ❤ by GitHub