Understand HTTP CORS Request
Tags: javascript, webdev, beginners, programming
Published: 2022-04-26 15:21:50

<p><span class='first-letter'>Y</span>ou always used HTTP methods like GET/POST/PUT/DELETE, there is one more methods called <mark>OPTIONS</mark> which used to execute prior to GET/POST/PUT/DELETE methods.</p>

## What is CORS 🤔

Cross-Origin Resource Sharing (CORS) is an HTTP-header-based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

## What is a Preflight request in CORS? 🤨

According to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request">MDN Docs</a>, A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.

It is an <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS
">OPTIONS</a> request, using three HTTP request headers: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Request-Method">Access-Control-Request-Method</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Request-Headers">Access-Control-Request-Headers"</a> , and the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin">Origin</a> header.

The preflight request is automatically issued by the browser and frontend devs don’t do the options call.

OPTIONS call appears when the request is qualified as "to be preflighted".

### How does the Preflight request work?

Before sending a POST request to the server, you will ask the server for a POST request.

```jsx
OPTIONS /resource/foo
Access-Control-Request-Method: POST
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org
```

If the server allows it, then it will respond to the preflight request with an <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods">OPTIONS</a> response header, which lists `POST`:

```jsx
HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400
```

Lets take an example, you are working on a blog website <a href="http://blog.suprabha.me">blog.suprabha.me</a> and your API is on **api.blog.suprabha.me**. It’s really nice and easy to understand to see the prefix of the blog website is “API”.

As you can see the the API(**api.blog.suprabha.me**) and the origin( <a href="http://blog.suprabha.me">blog.suprabha.me</a>) are different, also the hostname is different. 

<br></br>
<p><mark>Port</mark> and <mark>Protocol</mark> also follow the same logic as hostname. So if there is any differences in hostname, port, protocol request executed on the page will require a CORS request.</p>

<br></br>
If you notice the header `sec-fetch-site` is attached to any XHR request in the firefox/chrome browser it will indicate whether this was a same-origin request or not.

A quick example of cross-origin request headers:

> Sec-Fetch-Site: cross-site

<p><mark>cross-site</mark> tells the request initiator and the server hosting the resource have a different site.</p>

If you try to write a proxy using node or use any services like Cloudflare to proxy your application, which creates an alias to the API which routes **api.blog.suprabha.me** to **blog.suprabha.me/api** and moving over the JavaScript clients using the `API.` subdomain will cut your network traffic in half.

### Reference 🧐

- <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Site">Sec-Fetch-Site</a>

<a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        📚 <a href="https://gum.co/css-pseudo-class-elements"> Ebooks</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>