Build an Online Shop with Vue

Enabling CORS

CORS stands for Cross-Origin Resource Sharing, and it's tricky.

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served. - Wikipedia

What is Wikipedia saying? I thought I could embed an image from one website onto another without coming across this term CORS. Yes, of course, you can; but some request mechanisms disables CORS by default. Ajax is notoriously known for being a victim of disabled CORS.

To fix this domain sharing issue, this content needs to enable CORS explicitly. This is not a hard task in Node, the following does that:

app.all('/*', function(req, res, next) {
  // CORS headers
  res.header("Access-Control-Allow-Origin", "*"); // restrict it to the required domain
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  // Set custom headers for CORS
  res.header('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key');
  if (req.method == 'OPTIONS') {
    res.status(200).end();
  } else {
    next();
  }
});

So you can replace with the comment placeholder that says //CORS config will be here.