xmlHttpRequest and cross-site restriction

Question

Ho can i bypass this restriction? I know i can use some kind of a proxy but not sure how this proxy should look like?

Any other suggestions?

Answer 1

Here is a pretty straightforward tutorial: http://developer.yahoo.com/javascript/howto-proxy.html

Basically, you make a service that takes an xmlhttprequest and have to request data from the external domain, and then return the result.

Answer 2

JSONP is exactly for that purpose

JSONP or "JSON with padding" is a complement to the base JSON data format, a pattern of usage that allows a page to request data from a server in a different domain. As a solution to this problem, JSONP is an alternative to a more recent method called Cross-Origin Resource Sharing.

Here is the very very basic example of JSONP implementation.

The server side code -

 public string GetFirstName()
        {
            string callback = Request.QueryString["callback"];
            string resultJson = "{\"FirstName\": \"archil\"}"; //should definitely be some more application specific data :)

            if (!string.IsNullOrEmpty(callback))
            {
                return string.Format("{0}({1})", callback, resultJson);
            }
            return resultJson;
        }

This method is mapped to /GetFirstname URL on server. It is extacting callback argument from query string. And wrapping generated resultJson as javascript function call where name of function is parameter passed with callback.

on the client side, using jQuery - implementation is as simple as

$(function () {

        $.ajax('http://serverUrl/GetFirstName', {

            dataType: 'JSONP',

            jsonpCallback: 'alert'

        });

    });

This will pass function name alert as callback for server. Server will return alert({"FirstName": "archil"}). jQuery will automatically inspect this response and execute it. As the result, you will get standart alert screen in browser. Main idea is that alert is executed will the server's return parameters. You could pass more specific function name as jsonpCallback and act on results of request.

I KNOW that the URL pattern used here is more like RPC style web service than REST style, but the example is about using JSONP, not about REST architecture

Answer 3

You can use $.ajax() call.

This has property crossdomain: which handles the cross domain request.

http://api.jquery.com/jQuery.ajax/

For cross domain request using jquery have a look at the http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/

Answer 4

Here are basic steps to create such proxy.

• Create server side page (using server side language like PHP or ASP.NET it doesn't really matter) and call it for example "MyProxy.aspx"
• In the server side code read the data sent either on URL or as POST data, and send that data as Web Request (in case of .NET, there's surely equivalent in PHP and other languages) to the external website.
• Parse the result sent from the external website and send it back to the client.
• In the client, send AJAX request to the proxy page (e.g. MyProxy.aspx) passing it the proper data, and handle the response.

Let us know what server side language you're using for more technical help to implement the above.