Hi everyone. I’m Tania Khalafbeigi, a new PhD student in this lab and this is my first blog post. In this post I want to share a problem-solution with you that I faced during implementing two projects front-ends. The problem is with cross-domain Ajax request. The explanation of this problem and its solution will be discussed in the following paragraphs.
Cross-domain Ajax requests are requests that are sent from one domain to another domain. For example, if we send an Ajax request from our domain http://abc.com to another domain http://xyz.com, this would be a cross-domain Ajax request. This kind of request is restricted in the browser because of the same-origin policy of the browsers. The same-origin policy in browsers dictates that certain types of data transfer in the browser layer (via JavaScript) must be restricted to only occur if the target resource’s domain is identical to the page making the request. This policy is in place in all modern browsers to help protect users from unwanted or unsafe malicious JavaScript behaviors. There are different solutions for this problem which I want to discuss three of them in this post.
The First solution is for the case that we have access to the remote server that we want to access through cross-domain Ajax request. In this case, we can change the response header of the server and add “Access-Control-Allow-Origin: http://abc.com” to it. With this change a client from http://abc.com can send a request to that remote server with no problem. In other words, by adding that feature to the response header, the server tells the browser that the domain http://abc.com has the authority to send the request to it. Moreover, if we set “Access-Control-Allow-Origin: *” in the server response, we allow all other domains to send us Ajax requests. In my opinion, this solution is the simplest one.
The second solution is using JSONP which stands for JSON-with-Padding. We need to have access to the server for applying this solution as well. Also, this solution has the limitation that the response type could only be JSON. The basic idea of JSONP is that the JSON response is wrapped in a JavaScript function so that it can be accessed through a <script> tag. In this case, instead of sending an Ajax request to the server, we add a <script> tag to our html file and set its source to the server URL. As an example, suppose that we want to get this JSON response from the server:
{
‘id’: 1 ,
‘Name’: ’foo’
}
For using JSONP, instead of sending this response to the user, we wrap it in a JavaScript function call and send it to the user like this:
callback({‘id’ : 1 ,‘Name’: ’foo’});
As a result, when a client wants to send a request to this server, it only needs to add a <script> tag to its html source like this:
<script type=’text/javascript’ src=’http://xyz.com?jsonp=callback’> </script>
There is one more thing we need to do and that is defining the callback function in the JavaScript code of the client. This can be a code example of the client:
<script> function callback(json){ alert(json.Name); } </script>
As you see, this solution needs changing both the client and server of the request.
The last solution that we discuss in this post is for the case that we don’t have access to the server. In this case we can access the server response using a proxy. This is a sample code of the proxy in php language:
// Get that server's content $handle = fopen($serverURL, "r"); // If there is something, read and return if ($handle) { while (!feof($handle)) { $buffer = fgets($handle, 4096); echo $buffer; } fclose($handle); }
So, these are three useful solutions for sending cross-domain Ajax requests. In three month of working I faced this problem twice. I hope this blog can help speed up handling this problem.
References:
[1] http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
[2] http://en.wikipedia.org/wiki/Same_origin_policy
[3] http://en.wikipedia.org/wiki/JSONP
[4] http://json-p.org/
[5] http://msdn.microsoft.com/en-us/library/dd573303(v=vs.85).aspx
