Cross-Domain Data Loading

It's quite uncommon for an app to require data from a domain which is different from the one it's hosted on. Let's suppose that your app is hosted at http://app.mydomain.com, the data are located at http://data.mydomain.com and the data-loading script is called "data.php".

Standard loading will fail in this case, as all browsers block cross-domain operations for safety reasons, even if you try using a different port.

Nevertheless, there are techniques to overcome these problems. With Webix lib, you can use Cross-Origin resource sharing to perform types of requests. - JSONP Loading for GETting data only.

You cannot load data with the load method, normally used by data components for external data. On the contrary, you will issue data requests and parse the returned data in a callback.

Cross-Origin Resource Sharing or CORS

CORS requires additional server configuration, namely you need to configure data server so that it allows any program from the app's domain (and hence, the app itself) to get data from it.

When you issue such an Ajax request with the Webix Ajax function:

webix.ajax("http://data.mydomain.com/data.php", function(text, data){
    table.parse(data.json());
});

the browser sends the following header with the HTTP request:

Origin: http://app.mydomain.com

You need to make the data server (http://data.mydomain.com:) respond with a specific "allowing" header as well. The app's server is allowed to get data from the data server:

Access-Control-Allow-Origin: http://app.mydomain.com

This can be done in three ways:

  • You can configure the settings of the server;
  • You can adjust the code of your app to output the header as a part of a server response;
  • You can use some third-party API with the server already set for the CORS protocol.

More detailed information about CORS in the Wiki article.

Advantages

CORS technique is standard based, safe and can be used with any kind of data (structured or not) while supporting all types of requests – GET, POST, PUT, DELETE, etc.

Drawbacks

CORS protocol can't be used in IE8 and IE9.

Back to top