Are you one of those wondering what is CORS or facing issues with your website due to CORS policy? Let’s get to know more about CORS.

CORS is a mechanism that enables things like sharing content/sources between two domains/websites. This kind of request is called a Cross-Origin request, as a resource of one domain is requesting a resource from another.

Workflow of CORS:

The CORS workflow starts when a requested resource is loaded from one origin and attempts to request another origin.

Let’s see an example to understand more about it.

In the above image, domain-a.com is trying to access the image from the same server and it gets all the required resources from the domain-a.com server because the same domain is requesting the resources so it can trust its domain, but when it tries to access other domain(domain-b.com) resources which will block to share the resources and throws an error like below

CORS uses HTTP headers to determine whether the requested domain should have access to that resource or not. The browser automatically sends a request header to another domain  and the same will be received at the other end and determines whether the requested domain is acceptable to share the resources or not and will respond with either:

• Access-Control-Allow-Origin: http://domain-a.com
• Access-Control-Allow-Origin: * (meaning all domains are allowed)
• An error if the cross-origin requests are not allowed (as shown above image)

More about CORS HTTP headers:

1. Access-Control-Allow-Origin:

This header will be returned by the server and indicates that client domains are

 allowed to access its resources. The value can be:

•  *  – allows any domain
• a fully qualified domain name (ex: http://domain-a.com)

2. Access-Control-Allow-Credentials:

• This header must be present on the response side and if your server supports authentication via cookies. This accepts only one value i.e., true.

3. Access-Control-Allow-Headers

• It expects a comma-separated list of request header values to the server which is willing to support it. If you are using custom headers, you need to return the ACA header response to options, or it will block the request.
• This header option is required only if the request has an Access-Control-Request-Headers header.

4. Access-Control-Expose-Headers

• Similar to the Access-Control-Allow-Headers, this response will also contain a list of headers that will be present in the actual response to the call, after that it will be made available to the client. All other headers will be restricted.

5. Access-Control-Allow-Methods

• It expects a comma-separated list or *(wildcard) of request method types that the server is willing to support.

Preflight CORS example:

When certain types of requests are performed, the browser will add additional preflight requests to check whether they have the appropriate permissions to act. The request will be pre-flighted only if any of the following conditions are met:

• If HTTP method uses other than GET or POST
• Custom headers are used

If the request has a MIME type other than text/plain

A simple example of a preflight request:

Origin: http://domain-a.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

If domain-b.com is willing to accept the action, it will respond with the below headers:

Access-Control-Allow-Origin: http://domainx.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header

Conclusion:

CORS is a great feature for minimizing the number of security attacks with web script sharing while being able to use resources outside of the origin domain.

Having the ability to choose which domains are allowed to access some resources will also give us added granularity to the resource-sharing capability. When configured properly, CORS can easily integrate with other web services while keeping your website and users secure.

To know more about about CORS here