Express + Passport + CORS: session allowed for multiple domains

Question

I am trying to make the frontend (React JS) work with my backend server (Express JS). I am still fighting with CORS. The frontend requests are still blocked by CORS.

According to CORS documentation I have set my Express instance to use cors() as middleware:

const app = express();

// Middlewares
const whitelist = [
    'http://localhost:3000',
    'http://localhost:3001'
];
const corsOptions = {
    origin: function (origin, callback) {
      if (whitelist.indexOf(origin) !== -1) {
        callback(null, true);
      } else {
        callback(new Error('Not allowed by CORS'));
      }
    }
};
app.use(cors(corsOptions));

If someone asks why am I using CORS with localhost at all, is because I was told to do so since I had to send withCredentials: true header from axios requests to persist session after login.
I just added axios.defaults.withCredentials = true to intercept requests in the frontend.

The way it was working before adding more domains to corsOptions was setting up a middlewares to let the server work with the frontend:

export const setHeaders = (req, res, next) => {
    res.header('Access-Control-Allow-Origin', process.env.APP_URL);
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
};
...
app.use(setHeaders);

If I remove the previous code, it won't work even for one domain.

So, what I have to change in order to let the server fetch data from multiple domains? Thanks in advance.

Answer 1

Add credentials and allowedHeaders options to your corsOptions config

credentials: true,
allowedHeaders: ['Origin, X-Requested-With, Content-Type, Accept'],

Read https://www.npmjs.com/package/cors#configuration-options

Also, you can whitelist domains with 127.0.0.1 as you might want to access them via localhost or 127.0.0.1

Full code

const app = express();

// Middlewares
const whitelist = [
    'http://localhost:3000',
    'http://127.0.0.1:3000'.
    'http://localhost:3001',
    'http://127.0.0.1:3001',
];
const corsOptions = {
    credentials: true,
    allowedHeaders: ['Origin, X-Requested-With, Content-Type, Accept'],
    origin: function (origin, callback) {
      if (whitelist.indexOf(origin) !== -1) {
        callback(null, true);
      } else {
        callback(new Error('Not allowed by CORS'));
      }
    }
};
app.use(cors(corsOptions));