Express CORS Policy: No "Access-Control-Allow-Origin"

Web applications often use JavaScript to make requests to APIs hosted on different domains. Cross-Origin Resource Sharing (CORS) is a mechanism that allows web servers to specify which domains are allowed to access their resources. By default, web browsers enforce the same-origin policy which prohibits JavaScript from making requests to domains other than the one hosting the web page.

If an API does not support CORS, the web browser will block JavaScript from accessing the API and throw an error like:

Access to XMLHttpRequest at 'http://api.example.com/' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error occurs because the API did not include the Access-Control-Allow-Origin header in its response. The header specifies which domains are allowed to access the API.

To fix this error, the API must include the Access-Control-Allow-Origin header in its response, with the value set to the domain hosting the web page, or a wildcard * to allow any domain to access the API.

In Express, you can enable CORS by using the cors middleware package. For example, to allow any domain to access an API hosted on localhost:3000:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

// API routes here

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

This middleware sets the Access-Control-Allow-Origin header to * by default, allowing any domain to access the API. You can also set the header to a specific domain or list of domains:

const express = require('express');
const cors = require('cors');
const app = express();

const allowedOrigins = ['http://example.com', 'http://example.org'];

app.use(cors({
  origin: function(origin, callback) {
    if (!origin) return callback(null, true);
    if (allowedOrigins.indexOf(origin) === -1) {
      const msg = 'The CORS policy for this site does not ' +
                  'allow access from the specified Origin.';
      return callback(new Error(msg), false);
    }
    return callback(null, true);
  }
}));

// API routes here

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

This middleware checks the origin header of the request against a list of allowed origins. If the origin is not allowed, it returns an error with a message indicating that the CORS policy forbids access from the specified origin.

In summary, the "Express CORS Policy: No 'Access-Control-Allow-Origin'" error occurs when an API does not support CORS and the web browser blocks JavaScript from accessing the API. To fix the error, the API must include the Access-Control-Allow-Origin header in its response. In Express, you can enable CORS by using the cors middleware package and setting the origin property to a list of allowed domains.