Understanding Of CORS

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell the browser to let a web application running at one origin(domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

An example of a cross-origin request is:

We always have a separated server and client in our project. Now client and server both communicate with each other. If both server and client running on the same host, then communication is there without any error.

But if both client and server are on a different host, then communication in such a situation fails the request and throw an error.

This is the security mechanism as no one should be able to access the data on the server or its resources if you are not running on the same server. So, if this type of request is there on different servers, this will give up an error called CORS error.

CORS error can be resolved by setting up headers. The HTTP headers that relate to CORS are:

1. Request Headers: These headers are used by clients when issuing HTTP requests to make use of cross-origin sharing feature. These headers are set when a client requests to the server.
   • Origin: This header indicates the origin of the cross-site access request or preflight request. The origin is a URI which indicates the server from which the request is initiated. In any access control request, the Origin header is always present.
   • Access-Control-Request-Method: This header is used when there is an issue in preflight request to let the server about what HTTP method will be used during actual request. Some of the methods are:
     • Get
     • Post
     • Patch
     • Delete
     • Options
     • Connect
     • Trace
   • Access-Control-Request-Headers: This header is used when there is an issue in preflight request to let the server about what HTTP headers will be used during actual request. Some of them are:
     • Origin
     • Content-Type
     • Accept
     • Accept-Language
     • Save-Data
     • Viewport-Width
2. Response Headers: This lists the Http response headers that servers send back for access control requests defined by CORS.
   • Access-Control-Allow-Origin: This header specifies either a single origin, means to allow that origin to access the resource, or by requesting without credentials using “*” wildcard that allows any origin to access the resource.
   • Access-Control-Expose-Headers: This header lets the server about the whitelist headers that browsers are allowed to access.
   • Access-Control-Max-Age: This header indicates how long the results of a preflight request (first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send) can be cached.
   • Access-Control-Allow-Credentials: This header indicates whether or not the response to the request can be exposed when the credentials flag is true.
   • Access-Control-Allow-Methods: This header is used in response to a preflight requset to indicate which methods are allowed to access the resource.
   • Access-Control-Allow-Headers: This header is used in response to a preflight requset to indicate which headers are used to make the actual request.

For any further references, visit MDN web docs