Scope

Helps to understand the importance and involvement of CORS configuration in any web interface

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

Why will the browser block the communication?

Its browser security features. It will do so if the request is coming from an origin different from that of the client. The additional headers included as a result of CORS is a way of telling the client that it can make use of the response that it received.

Response Headers

These are the headers that the server sends back in its response.

Access-Control-Allow-Origin: : This is used to specify the origin allowed to access the resource on the server. It’s possible to specify that only requests from a specific origin are allowed 

Access-Control-Allow-Origin: https://geekflare.com, or that the origin does not matter – Access-Control-Allow-Origin: *.

Access-Control-Expose-Headers: : As the name implies, this lists the headers the browser has access to.

Access-Control-Max-Age: : This indicates the duration for which the response of a preflight request can be cached.

Access-Control-Allow-Credentials: : This indicates that the browser can make use of the response when the initial request was made with a credential.

Access-Control-Allow-Methods: : This indicates the method(s) that allowed when attempting to access a resource.

Access-Control-Allow-Headers: : This indicates the HTTP headers can be used in a request.

Here is an example of what the response will look like

HTTP/1.1 204 No Content

Access-Control-Allow-Origin: *

Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE

Vary: Access-Control-Request-Headers

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

Content-Length: 0

Date: Sat, 16 Nov 2019 11:41:08 GMT+1

Connection: keep-alive

Request Headers :

Here are the headers that a client’s request should contain in order to make use of the CORS mechanism.

Origin: : This indicates the origin of the client’s request. When working with a frontend and backend, as stated before, this will be the host of your frontend application.

Access-Control-Request-Method: : This is used in a preflight request to indicate the HTTP method that will be used to make the request.

Access-Control-Request-Headers:

Here is an example of what a request will look like

curl -i -X OPTIONS localhost:3001/api \

-H 'Access-Control-Request-Method: GET' \

-H 'Access-Control-Request-Headers: Content-Type, Accept' \

-H 'Origin: http://localhost:3000'

Preflight Requests :

What is a Preflight request?

Preflight requests happen when the client has to send a preflight request before the main request. The preflight request is more of a probe to determine if the server supports the main request that’s about to be made. When positive confirmation is obtained, the main request is then sent.

When a request is not a preflight request, it is called a simple request.

CORS relaxes the policy so that your browser can access the resources you want it to. Understanding what it is, why it’s essential, and how to set it up will help in figuring out the issues you might face as you build your web applications.