Cross Domain AJAX request

Author: Eugeniy Marilev
Date of publication: 2013-09-17 04:32:40
"Why can not I make an AJAX request to another domain?". This question is asked quite often and not by beginners only. The answer is - it is done for security reasons — in case scripts that somehow got to the page could not send data to a remote server. After launching the client script can get the content of cookies, user preferences and other client confidential information. To be honest, I think it's not a smart decision, because there is an opportunity anyways in javascript to work with the DOM tree of the document to add in the script arbitrary address, which is a replacement of the user's AJAX call. Yes, of course, this way you can not send a file because when script connects the GET-request is sent . GET is limited by the volume of data transferred, but this volume is more than enough to pass on third-party server, such as user session ID. There are two solutions of this problem:
  1. Installing and configuring a web server module, dealing with overwriting the request headers.
  2. An option to connect to the script block of the page. It is better accomplished with a «jsonp» AJAX-request library jQuery.
Next, we will take a close look at both options.

Setting up a web server for AJAX requests cross-domain

Let's have a server to Apache2 debian as an example:
  1. Turn on the module “headers”:
    sudo a2enmod headers
  2. Configure in shared hosting the return heading:
    Header set Access-Control-Allow-Origin *
  3. Reboot configuration of the server:
    sudo /etc/init.d/apache2 reload
For other web-servers in details you can check here. Advantages:
  1. Maximum effect with minimum expenditure of time.
  2. Flexibility of configuration. You can allow to access only to certain addresses here.
Disadvantages:
  1. This version still does not solve the problem for Internet Explorer browsers.

JQuery AJAX with type "jsonp"

In fact the problem arises when making a request browser does not keep the connection and interrupts it without getting the necessary headers. We want to process some code when the server gives us an answer. Usually the answer is the json or xml. To avoid this we propose the following alternative. When sending a request to the server a line parameter «callback» is being passed. For example, http://mysite.com/ajax/data?callback=my_callback_function. Thus, we give an indication of the Web server that the results that will be returned need to be processed with the function «my_callback_function». So, all that remains – the web server has the data to frame in a function-callback in the resulting response, like this:
my_callback_function(data)

where data — returning data, for example, as following structure - {param1: value1, param2: value2}.

This implementation of client requests is done in a library jQuery. In order to send a request of the type described above to the remote address you need to put the function jQuery.ajax as a parameter type received from the data server - "jsonp". It looks like this:
$.ajax({
    url: "http://mysite.com/ajax/data",
    data: {param1: value1, param2: value2},
    jsonpCallback: "my_callback_function",
    dataType: "jsonp"
});
The advantages of this option:
  1. works cross-browser;
  2. simple to implement;
  3. does not require extra server configuration.
The disadvantages of this option:
  1. Since we can only send GET-requests, there is a limit on the size of the request.
  2. It is necessary to implement different logic queries to the current domain and external domains.
  3. It is unable to process the necessary code, if the server for some reason returns an error code.
Article comments
Comments:
No results found.
Only logged users can leave comments.