CORS – Cross Origin Resource Sharing

CORS is one of the most important topic when developing Web Application. In this post we will understand,

• What is Cross Origin?
• What is CORS?
• How CORS works.
• How to enable CORS(with Express.js).

Cross Origin

Origin simply means URL. If two or more URL have different Protocol or Host or Port they are considered as Cross Origin. For example, http://localhost:3000 and http://localhost:5000 are two different origins.

CORS

CORS stands for Cross-origin Resource Sharing. Our browser can’t give us the permission to share resources between two different origins. But today we need to share resources between two different origins. CORS is a mechanism that helps us to share resources.

How CORS works

Suppose, we have two origin one for client http://localhost:3000 and one for server http://localhost:5000, if we decide to share resource between each other we need to enable CORS(we will see how to enable CORS in the next section),

First a Preflight Request will go from Client to Server, this Preflight Request contains information of HTTP method to use or HTTP headers. Then Server sends Preflight Response,

After that the actual Request from Client to Server and Response from Server to Client will happen.

As the Preflight Request and Preflight Response is finished then the actual Request will execute.

This is how CORS works in general.

Enable CORS

In order to enable CORS we need to set header from server side, we have Access-Control-Allow-Origin which will tell which origin has the permission for Resource Sharing.

Access-Control-Allow-Origin: *

we can use * or a particular origin

Access-Control-Allow-Origin: http://localhost:3000

* means Resource Sharing will happen for all origins else will happen for particular origin. This way we are enabling Resource sharing for both origin.

We also have Access-Control-Allow-Methods header which indicates which HTTP method or methods are permitted while accessing the resource. We can use them just like the previous example,

Access-Control-Allow-Methods: *

Access-Control-Allow-Methods: POST, GET, OPTIONS

Another one is Access-Control-Allow-Headers which used in response for a preflight request, this indicates Access-Control-Request-Headers which HTTP headers can be used during the actual request.

Access-Control-Allow-Headers: Authorization, Content-Type

Enable CORS in Express.js

In order to enable CORS inside Express.js app you can install cors package and use it like this,

const app = express();
app.use(cors());

You can also put some custom cofiguration,

cors({
  origin: true,
  methods: ['HEAD', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
  allowedHeaders: [
    'x-now-id',
    'x-now-trace',
    'x-powered-by',
    'Origin',
    'Accept',
    'Content-Type',
    'Set-Cookie',
    'Authorization',
  ]
})