To avoid the 'Access-Control-Allow-Origin' issue, how should CORS be set up on a MERN app that calls an API that is located somewhere else?

Question

I am playing around with a MERN app that calls the themealdb api which works fine, until authentication and authorization with JWT and cookies are applied. If I log in, then whenever a call is made I get the following

Access to XMLHttpRequest at 'https://www.themealdb.com/api/json/v1/1/search.php?f=a' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

It looks to me that the following line of code that is on the React side is to blame

axios.defaults.withCredentials = true;

If I comment this line out, the problem goes away and the calls are made without issue.

Looking around here through the answers it seems that the solution can be worked out on the backend which is Express for me, but so far nothing works. The Express code had this for cors:

app.use(cors({origin: ['http://localhost:3000'], credentials: true}));

I replaced that with the following using both let and var for corsOptions in case but the same error:

let corsOptions = {
    origin: 'http://localhost:3000',
    credentials : true
   }
  
  app.use(cors(corsOptions));
  
  app.use(function (req, res, next) {   
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');    
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');    
      res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');   
      res.setHeader('Access-Control-Allow-Credentials', true);    
      next();
  });

Any advice on what to do? For such a situation what needs to be added to the server side to make it work?

Thanks

Answer 1

I usually use this snippet to enable CORS for a pre-configured list of origins:

const allowOrigins = ['http://localhost:3000', /** other domains if any */ ]
const corsOptions = {
  credentials: true,
  origin: function(origin, callback) {
    if (allowOrigins.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

server.use(cors(corsOptions));

Also, as per MDN, you can try setting the withCredentials option to false on your client.

Alternatively, if you are connecting to a service which you do not maintain, you can instead create a Node proxy which will call the 3rd party service instead of your client calling it directly.

const express = require('express')
const request = require('request')
const port = process.env.PORT || 8000

let server = express()

const proxyMiddleware = (req, res, next) => {
  let url = `https://www.example.com/${req.url}`
  let proxyRequest = request(url)

  // Pass request to proxied request url
  req.pipe(proxyRequest)

  // Respond to the original request with the response from proxyRequest
  proxyRequest.pipe(res)
}

server.use(proxyMiddleware)

server.listen(port, () => console.log(`Listening on ${port}`))