What is CORS? How to deal with it?

What is Cross-Origin Resource Sharing, Why it is important, and how to deal with it?

How does a Web Request work?🤔

Accept: text/html 
Content-Encoding: gzip

How CORS works?

1. Client Request

2. Server Response

3.Response Received By Browser

const xhr = new XMLHttpRequest(); 
onst url = 'https://bar.other/resources/public-data/';
xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();
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
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: https://foo.example

Resources

Hey 👋, I am Adarsh, a Web Developer from 🇮🇳