Every web developer must have heard or received an “Access-Control-Allow-Origin” error. The exact error statement is somewhat as below:

XMLHttpRequest cannot load http://test.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://abc.com’ is therefore not allowed access.

 

Let me explain this in simplest of terms.

Suppose I am a big fan of apple. I appoint 2 person who daily bring apples for me to eat. Since I know these 2 people very, I trust them and eat the apple they bring. Now suppose at someday a new person comes to me and delivers apple to me. I would definitely not eat them because I do not know the identity of the person who delivered them and hence some enemy of mine wanting to kill me could have sent poisoned set of apples. So basically I take apples only from known set of people.

Now I enquire with this new person about who sent those apples and he tells me that the apples are sent by person X, who happens to be one of my best friend. He makes a call to person X and person X being from Kashmir tells me that a fresh stock of apples had arrived at his place and since I so much loved apples, he sent them over through this person. So what do I do? Having known the origin of these apples, I happily accept them.

Cool!!

A browser sends XMLHttpRequest to the server through AJAX calls. These AJAX calls are placed in JavaScript files. Now in an HTML page there can be 2 sources of JavaScript. One is that I write my own JavaScript files and second I can include JavaScript from other sources.

I am completely aware about my written JavaScript and its execution flow. But what the code in JavaScript written by other source might contain I do not know and hence I cannot trust. But JavaScript from both sources can make an AJAX call but I cannot know exactly who made this request, whether request originated from my own written JavaScript or from other sources. So in this case browser helps and implements something called as Same-Origin-Policy (SOP). This means that browser by default allows only that JavaScript to execute AJAX calls which originated from my server. Hence any other JavaScript that was included in my page cannot execute an AJAX call. That is cool!!

This way I do not have to worry about who made the call and cannot go ahead with responding to the request.

But then comes a trouble. What if I want JavaScript from other sources be allowed to make AJAX request to my server, which the browser won’t allow normally because of SOP. What could be the alternative if I want JavaScript from one of the trusted sources to execute an AJAX calls.

For this to happen, the browser implements a Cross-Origin-Request-Sharing policy (CORS).In this case the browser first sends an http request to the server setting an Origin and specifying the address of the server from which the JavaScript originated.

 

Access-Control-Allow-Origin: http://www.abc.com

 

So here JavaScript from abc.com is trying to make an AJAX call to server.

Now when this request reaches the server, the server responds by setting the following in the response:

Access-Control-Allow-Origin: http://www.abc.com

 

This means that the server responds saying that abc.com is a trusted source and should be allowed to make an AJAX request to the server. On receiving the above response, the browser goes ahead and allows the JavaScript from abc.com to make an http request.

In case if the server could not identify the Origin abc.com, the server denies abc.com to make any AJAX request and sends back a HTTP 403 forbidden header. The error that the browser throws up on receiving this is like:

XMLHttpRequest cannot load http://test.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://abc.com’ is therefore not allowed access.

 

Now compare this scenario, with my apple love scenario above. The 2 person I appoint to bring down apple to me are like my own written JavaScript code while the unknown person who brings me apples is like JavaScript from other sources which I cannot trust. I making the call to my best friend regarding the validity of the apples is like browser sending me a request with Origin header and later on my approval when the person hands over the apples to me is like the server sending Access-Control-Allow-Origin to the browser to allow abc.com to make AJAX request the server.