Yes, this violates the SOP. There are ways round it, but it's worth underlining a key point:
Any attempt from the client to access a remote server requires complicity on the part of that server.
So what are the options?
JSON-P
JSON-P involves having the server return a response wrapped in an invocation to a callback function. It works like this:
- a new script tag is DOM-scripted into the page, or an existing one is
reused
- the script tag's
src attribute is set as the request path (script tags can load scripts from anywhere - they are not subject to
the SOP)
- the server response with data, often (but not necessarily) encoded
as JSON, and prints this out as an argument to an invocation of a
callback function (which must be defined in your JS)
So a JSON-P request, written in native JS, looks like this:
callback = function(response) { console.log(response); };
var script = document.createElement('script');
script.src = 'http://www.some-request.com/here.php?callback=callback'; //the example happens to use the same name; the callback parameter tells the some-request domain what function to wrap JSON in
document.body.appendChild(script);
Then, if the server's response was
callback({"foo": "bar"});
...we'd get the response in our console. Note I explicitly make the function global because it must be accessible and not hidden by scope. (In this sense it must be globally accessible, but not necessarily global in the traditional sense - it could, for example, be a static method of a global namespace).
Many JSON-P-complying web servers allow you to stipulate the name of the function you want it to call, normally by appending this info to the request URL via &callback=func_name.
More info on this here.
CORS / XHR2
In CORS, aka the cross-domain idea behind XHR (i.e. AJAX) v2, this will mean the server sending a header signifying which domains may make cross-domain requests to it - or all domains. In PHP, for example, we could allow any caller domain to make the request thus:
header("Access-Control-Allow-Origin: *");
More info on this here.
EasyXDM*
EasyXDM collates a number of vendor-specific and newer, HTML5-arriving means of posting and receiving text-based messages between domains, and is worth a look.
Non-JS
If you need to get something from a server that does not play ball, your only option is an intermediary server-side script, as these can fire cURL requests that can scrape a remote resource without the confines of the SOP.
$curl = curl_init("http://www.example.com/");
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
More on cURL here.
$.getJSONjquery implementation as an example: github.com/jquery/jquery/blob/master/src/ajax.js#L284 – Vlf