At the initial stage any developer whether one is .net ,php, node or python developer face a common problem that would be.

So let's understand CORS and how we should use it to make you app secure.

CORS Cross-Origin Resource Sharing is a mechanism which blocks unwanted client side scripts to access resources on a server with the help of some http headers.

Now suppose a client host http://example-a makes an XMLHttpRequest to http://example-b browser would complain about missing Acess-Conrol-Allow-Origin header on response and will block the client to access the response.

Now what happens on minimum level is if a client[http://example-a] makes a request at server[http://example-b].

• Request gets rejected if response header does not include Access-Control-Allow-Origin header with the value either *http://example-a or * *.
• Request is successfully completed if the header is present with appropriate value.

Now Which request gets blocked by server by CORS policy

• Invocations of the XMLHttpRequest or Fetch APIs, as discussed above.
• Web Fonts (for cross-domain font usage in @font-face within CSS)
• WebGL textures.
• Images/video frames drawn to a canvas using drawImage().
• CSS Shapes from images.

Headers

There are multiple headers a server can specify to restrict client to access a resource on server.

• Access-Control-Allow-Origin tells the browser if current client should access the response for this request header's origin value shoudl be in Access-Control-Allow-Origin.

• Access-Control-Expose-Headers the list of headers which be available to client by server.

• Access-Control-Max-Age header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.

• Access-Control-Allow-Credentials if this header value is true and client makes request with credentials - include. server can access cookies and http authentication header by client.

• Access-Control-Allow-Methods the list of methods client can use to make request on server.

• Access-Control-Request-Headers the list of headers client can send to server. some headers are allowed by default. the list of headers which are allowed by default.

Preflight Request

"preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, to determine if the actual request is safe to send.

There are conditions when preflight request will not be made mention in detailed on mdn .

All of these concepts has been demonstrated on this demo github repository using node js.

Next ?

MDN has this amazing documentation on CORS one can look at.