Allow multiple CORS domain in express js

Question

How do I allow multiple domains for CORS in express in a simplified way.

I have

 cors: {
        origin: "www.one.com";
    }

    app.all('*', function(req, res, next) {
            res.header("Access-Control-Allow-Origin", cors.origin);
            res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            next();
        });

This works when there is only one domain mentioned in origin

But if I want to have origin as an array of domains and I want to allow CORS for all the domains in the origin array, I would have something like this -

cors: {
            origin: ["www.one.com","www.two.com","www.three.com"];
        }

But then the problem is this below code would not work -

app.all('*', function(req, res, next) {
                res.header("Access-Control-Allow-Origin", cors.origin);
                res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                next();
            });

How do I make res.header take an array of domains via cors.origin ?

Answer 1

I would recommend the cors-module: https://www.npmjs.org/package/cors It does this kind of stuff for you - check the "Configuring CORS w/ Dynamic Origin"-Section

Answer 2

The value of Access-Control-Allow-Origin must be a string, not a list. So to make it dynamic you need to get the requesting origin from the Origin HTTP request header, check it against your array of authorized origins. If it's present, then add that origin as the value of the Access-Control-Allow-Origin header; otherwise, use a default value, which would prohibit unauthorized domains from accessing the API.

There is no native implementation for this. You can do it yourself using the code below.

cors: {
  origin: ["www.one.com","www.two.com","www.three.com"],
  default: "www.one.com"
}

app.all('*', function(req, res, next) {
  const origin = cors.origin.contains(req.header('origin').toLowerCase()) ? req.headers.origin : cors.default;
  res.header("Access-Control-Allow-Origin", origin);
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 3

Using Node, cors middleware, make sure you leave the / off the url, OR ELSE cors could fail if the url in the browser is displayed without it. I.e.

var corsOptions = {
origin: ["http://www.example.com/","http://localhost:3000"],
optionsSuccessStatus: 200 // For legacy browser support
}

app.use(cors(corsOptions));

Failed and would give me the cors error because the browser would display/read the url as http://www.example.com, where below worked and is more inclusive and should work for http://www.example.com and anything beyond that, i.e. http://www.example.com/ or http://www.example.com/blogs/1, etc

var corsOptions = {
origin: ["http://www.example.com","http://localhost:3000"],
optionsSuccessStatus: 200 // For legacy browser support
}

app.use(cors(corsOptions)); 

Answer 4

In fact, Access-Control-Allow-Origin header should be the same value as the Origin header as long as you want to allow it.

So base on your code just

cors: {
    origin: ["www.one.com","www.two.com","www.three.com"]
}



app.all('*', function(req, res, next) {
            let origin = req.headers.origin;
            if(cors.origin.indexOf(origin) >= 0){
                res.header("Access-Control-Allow-Origin", origin);
            }         
            res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            next();
        });

Answer 5

Simplest way

const cors = require("cors");
app.use(cors({ origin: ["http://localhost:3000", "https://origin2.com"] }));

This will allow request from localhost:3000 and origin2.com

Answer 6

Hi i want to share my solution: !!! These code works if you are using a remote server and developing on localhost (webpack or another dev environment) Cheers!!

let ALLOWED_ORIGINS = ["http://serverabc.com", "http://localhost:8080"];
app.use((req, res, next) => {
    let origin = req.headers.origin;
    let theOrigin = (ALLOWED_ORIGINS.indexOf(origin) >= 0) ? origin : ALLOWED_ORIGINS[0];
    res.header("Access-Control-Allow-Origin", theOrigin);
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    next();
})