UNDERSTANDING CORS
Tags: webdev, javascript, ajax, http
Published: 2020-05-03 14:55:16

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m6zp877v59bz780ucytt.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rszjm0z6zwyopbqwbwcp.png)

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. <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header"> the list of headers which are allowed by default. </a>

## 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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests"> mention in detailed on mdn </a>.

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

{% github https://github.com/anakshiant/cors %}

## Next ?

MDN has this  <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">amazing documentation on **CORS** one can look at.</a>