Handling CORS in Express 4 – Express 4 CORS

Handling CORS in Express 4 – Express 4 CORS

In this post, we will give you information about Handling CORS in Express 4 – Express 4 CORS. Here we will give you detail about Handling  CORS in Express 4 – Express 4 CORS And how to use it also give you a demo for it if it is necessary.

CORS stands for Cross-Origin Resource Sharing and allows modern web browsers to be able to send AJAX requests and receive HTTP responses for resources from domains other than the domain serving the client-side application for Handling CORS in Express 4 – Express 4 CORS.

If you have ever been developing an application that is making XHR requests to a cross-domain origin and getting an error like the following in your browser console?

XMLHttpRequest cannot load . No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin is therefore not allowed access. The response had HTTP status code 500.

Your web browser is simply informing you that your web server is not sending back the headers that allow CORS i.e Access-Control-Allow-Origin and Access-Control-Allow-Methods

So in this tutorial, you’ll learn how to enable CORS in your Express 4 server to enable your front-end application to bypass the Same Origin Policy enforced by modern web browsers. This is particularly useful when you are locally developing your application since in many cases you’ll have two running development servers (front-end and back-end servers) in different ports, or if you want to enable resource sharing between different domains/hosts.

How to enable CORS in Express 4 – Express 4 CORS

There are many ways that you can use to enable CORS in Express.

If you are locally developing your application and want a quick way to CORS then you can simply use middleware with a few lines of code:

varexpress=require('express');varserver=express();server.use(bodyParser.urlencoded({extended:true}))server.use(bodyParser.json())server.use(function(req,res,next){res.header("Access-Control-Allow-Origin","*");res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");next();});server.get('/endpoint',function(req,res,next){res.json({msg:'This is CORS-enabled for all origins!'})})server.listen(3000,()=>{console.log('Listenning at http://localhost:3000')})

The wildcard * allows resources to be accessed from any origin.

That’s it you can now send requests from any origin without getting the same origin policy problems.

You can also use fine-grained options without having to deal with HTTP header names for CORS by using the CORS module installed from npm.

Using the CORS Module for Handling CORS in Express 4 – Express 4 CORS

Head over to your terminal and install:

npm install --save cors

You can then use it as a middleware

varexpress=require('express');varserver=express();varcors=require('cors');server.use(bodyParser.urlencoded({extended:true}))server.use(bodyParser.json())server.get('/endpoint',function(req,res,next){res.json({msg:'This is CORS-enabled for all origins!'})})server.use(cors());server.listen(3000,()=>{console.log('Listenning at http://localhost:3000')})

This is equivalent to our previous example and allows resources to be accessed from any origin by adding the Access-Control-Allow-Origin: * header to all requests.

Controlling Allowed Hosts

When you are in production you don’t want to allow CORS access for all origins but if you need to allow cross origin requests from some specified host(s) you can do add the following code:

server.use(cors({origin:'https://onlinecode.org'}));

This will allow https://onlinecode.org to send cross origin requests to your Express server without the Same Origin Policy getting in the way.

You can also enable CORS for a single Express route

server.get('/endpoint',cors(),function(req,res,next){res.json({msg:'This has CORS-enabled for only this route: /endpoint'})})

Allowing Dynamic/Multiple Origins

If you want to allow multiple origins you need to use a function (for origin instead of a string) that dynamically sets the CORS header depending on the origin making the request and a white list that you specify which contains the origin to allow.

varexpress=require('express')varcors=require('cors')varserver=express()varwhitelist=['https://onlinecode.org','http://othersite.com']varoptions={origin:function(origin,callback){if(whitelist.indexOf(origin)!==-1){callback(null,true)}else{callback(newError('Not allowed by CORS'))}}}server.use(cors(options))server.get('endpoint',function(req,res,next){res.json({msg:'This has CORS enabled'})})server.listen(3000,()=>{console.log('Listenning at http://localhost:3000')})

Conclusion for Handling CORS in Express 4 – Express 4 CORS

In this tutorial, we have seen some useful options for adding CORS headers to your web application, developed with Node.js and Express 4, which is particularly useful for developing applications with separate front-end and back-end apps or if you want to be able to share resources (via API requests) across many domains.

Hope this code and post will help you implement Handling CORS in Express 4 – Express 4 CORS. if you need any help or any feedback give it in the comment section or you have a good idea about this post you can give it the comment section. Your comment will help us to help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github