What is CORS? How to deal with it?

Hey Guys, Welcome to my blog page, In this article, we will be learning about one of the most discussed features in web development Cross-Origin Resource Sharing i.e CORS, By definition, CORS is an HTTP header-based mechanism that allows a server to specify origin other than it's own which are permitted by the browser to load resources.

The main intention behind the CORS is the browser's same-origin policy blocks loading a resource with a different origin. This helps to prevent malicious sites to read data from another site.

But what if you want to load a resource from another subdomain, URL, or server?

In a modern web application, the backend is hosted some another server and the front-end is hosted on another. In this case, your browser's same-origin policy will block you and will not allow you to access your resource.

The developers used to take help to JSONP to solve this issue but this is a workaround, but the Cross-Origin Resource Policy solves it legitimately.

Adding CORS to your request header will allow you to share resources across multiple origins.

How a Web Request works?🤔

Sending the data over the web requires following some protocol defined as HTTP (i.e HyperText Transfer Protocol ). The browser sends and receives data using HTTP.

HTTP Header is used to negotiate with what type of data is allowed to send, the Host, the origin, and some more useful data. The HTTP request is divided into two parts header and body, for the sake of this tutorial we will be focusing on the header part.

The header contains all sorts of information about the request, which is written as key and value pair. A sample header would look like this,

Accept: text/html
Content-Encoding: gzip

You can read this as Hey I want HTML data, and it should be gzip encoded.

How CORS works?

As said the Cross-origin policy tells you that a request from a different origin will not be allowed to access the resources if you want to access the resources then the server must tell the client what origins are allowed to access the resources then, your browser remembers that and allow such request to complete and access the resources.

Let's understand the cors flow,

1. Client Request

When a browser tries to make a cross-origin request it adds the Origin to the request that contains Scheme, Origin, and port.

2. Server Response

On the server-side when the server sees such kind of request and wants to allows it, it needs to add the Access-Control-Allow-Origin header to the response specifying the origin allowed to access it(like *).

3.Response Received By Browser

Such response received by the browsers with the Access-Control-Allow-Origin browser allows the client to access the resources.

For example, suppose web content at https://foo.example wishes to invoke content on domain https://bar.other Code of this sort might be used in JavaScript deployed on foo.example:

const xhr = new XMLHttpRequest();
const url = 'https://bar.other/resources/public-data/';

xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();

Let's take a look at the request that the client sends to the server,

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example

The origin harder here specifies the domain from the request is originated.

Let's see now, how the server will respond to the request with the Access Contol Allow Origin Header,

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

Access-Control-Allow-Origin : * Header tells the browser to allows access from all the origin (* is a pattern used) if you want you can specify the specific or list you can do that too like,

Access-Control-Allow-Origin: https://foo.example

Resources

developer.mozilla.org/en-US/docs/Web/HTTP/C..

web.dev/cross-origin-resource-sharing

This is how you can access the cross-origin resources in your application, this article was all bout the introduction to the CORS. To get notified about my next article do follow me, till then You can connect me on Twitter or DM on Discord. Thank you for reading.