Accessing other domain web services via jQuery Ajax (CORS)

Now a days, most of the web developers are working on mainly Client side programming to make the web more responsive, intuitive and user friendly. So avoiding the code behind, accessing the server via Ajax, passing and getting the data in JSON format, generating the DOM elements at Client side etc becoming very common these days and these all prepared the ground for many Client side libraries to come up and that’s what we are seeing now a days.

One of the most popular Client side library, jQuery, provides a lot of wrapper methods for writing quick and easy Client side code. You guys must have used jQuery ajax to initiate a ajax call and passing data to and fro in JSON format. As you must be knowing that XMLHTTPRequest  is the base for all Client side ajax call. All the Client side libraries provides a wrapper over it for making any AJAX call. So I’ll start with an example

I have created an empty web application and added a web page . I also added a jQuery script file. I created one small web method GetRatingValues at code behind that returns a list of numbers (Gave a name called rating). So let’s see the code and get it running

So my aspx code is like

<form id="form1">
<div><input onclick="GetRatingData()" type="button" value="GetRatings" />
<div id="ratingDetails" style="display: none;">
<h1>Available Rating Values</h1>
<div id="ratingValues"></div>
</div>
</div>
</form>

And my javascript code is like

<script type="text/javascript" language="javascript">// <![CDATA[
        function GetRatingData() {
            GetRatingValues();
        }
        function AjaxSucceeded(result) {
            $("#ratingDetails").show();
            $("#ratingValues").html(result.d);
        }
        function AjaxFailed(result) {
            alert('Failed to load');
        }

        function GetRatingValues() {
            $.ajax({
                type: "Post",
                url: "First.aspx/GetRatingValues",
                contentType: "application/json; charset=utf-8",
                data: '',
                dataType: "json",
                success: AjaxSucceeded,
                error: AjaxFailed
            });
        }

// ]]></script>

And my web method at code behind is as

 [WebMethod()]
    public static string GetRatingValues()
    {
        JavaScriptSerializer ser = new JavaScriptSerializer();
        IList ratingList = new List() { "5", "4", "3", "2", "1" };
        string str = ser.Serialize(ratingList);
        return str;
    }

Now if you run the code and Click on the button. It’ll run perfectly fine and page will be displayed as

Now let’s have another scenario. I have added a simple HTML page (Test.html) in my solution and I have added the following script on my aspx page

 function GetHTML() {
            $.ajax({
                type: "GET",
                url: "Test.html",
                success: ShowHTML,
                error: AjaxFailed
            });
        }
        function ShowHTML(data) { alert(data); }
        function AjaxFailed(result) {
            alert('Failed to load');
        }

Now if you run this code. It’ll display the html content of the page. I ran it and it displayed as expected

Let’s also see the HTTP Headers that I have taken via firebug

HTTP Headers

Also let’s see the response of the URL

If you see the encircled area in both the above picture they are pointing to localhost.

If you see the URL in both AJAX call they are pointing to same domain. But have you ever tried to initiate an jQuery AJAX call to some other domain .

What I have done here, I am running my application from IIS and I added a domain for Testing (localtest.me) in IIS. So I changed the URL in my AJAX call as

But now if you try to run this code, it would not run. Because now the URL targeting to other domain. Let’s see again the HTTP Headers and response.

Let’s see the Response

Now if you see here in the above picture the encircled area, both are different and pointing to different domain and didn’t get any result.

But why?

As I already described that every AJAX request is built on XMLHTTPRequest object and XMLHTTPRequest has some security limitation. It follows same-origin policy, it means that any HTTP request using XMLHTTPRequest initiated by a web application, can be processed only if it loaded from same domain/origin. If it requests to any other domain it will not be successful.

But as now we make lots AJAX call and some times to third party web services, it becomes hurdle to our development. To overcome this issue W3C has come up with feature called Cross-Origin Resource Sharing (CORS) which enables cross site data transfer without compromising security. To use this , we require to add few new HTTP headers that allows to add set of other origins/domains and the content type that is required to transfer.

Also let’s understand what is meant by other domain/origin?

If I have a domains like mydomain.com and mydoman1.com so as it is clear from seeing that these are different domain. Similarly subdomains like abc.mydomain.com and xyz.mydomain.com are also considered as from different origin/domain. Also at certain times the url also contains port number so if the port number is different, it also be treated as from different origin.

So as a thumb rule, you can say if the portion of URL before first single slash is different, it would be considered as from different origin and same origin policy would not be applied.

So now, let’s again back to our example. To run our example, we need to add these custom headers.  ASP.NET provides a way to add these new headers by adding some config entry. so I added the following in my web.config

Now if we run the code it runs successfully. Let’s analyse again the HTTP Headers and Response.

And the Response

Now if you see the dark encircled area, they are pointing to different domain and yet got the response. But the successful result caused by the thin encircled area in header pic, which is a new header got added. And we made this entry in web.config

But what would happen if I change the URL that I used in my first sample as

 function GetRatingValues() {
            $.ajax({
                type: "Post",
                url: "http://localtest.me/TestCORS/First.aspx/GetRatingValues",
                contentType: "application/json; charset=utf-8",
                data: '',
                dataType: "json",
                success: AjaxSucceeded,
                error: AjaxFailed
            });
        }

And if you run it again, It would not run. because in my last example, I was using Get Request. For Post (type: “Post”)request I can  transfer some data back and forth to server. So here I need to define one more entry in web.config that will add another header in the request as

Now after adding it, if you run the code then it’ll run like a charm.

One more point, I’ll make a here that providing * for Access-Control-Allow-Origin is not a good Idea, because it allows to access any other domain URL so it’s if you specify the particular domains here.

Hope you all have enjoyed this post. Do share your feedback.

Thanks,
Brij