Calling Web API Service in a Cross Domain Using jQuery AJAX

Back to: ASP.NET Web API Tutorials For Beginners and Professionals

Calling Web API Service in a Cross-Domain Using jQuery AJAX

In this article, I am going to discuss Calling Web API Service in a Cross-Domain Using jQuery AJAX. Please read our previous article before proceeding to this article where we discussed how to consume a Web API service using jQuery AJAX with an example. As part of this article, we are going to discuss the following pointers.

  1. What is the same-origin policy of a browser?
  2. What do you mean by Cross-Domain?
  3. Understanding CORS.
  4. What is JSONP and what does it do?
  5. How to use JSONP to call Web API Services in a Cross-Domain?
What is the same-origin policy of a browser?

The browser’s default behavior is that it allows a web page to make AJAX calls only within the same domain that means the browser security prevents a web page to make AJAX requests to other domains. This is called the same-origin policy. 

The origin of a request consists of Scheme, Host, and Port number. So, two requests are considered to be of the same origin if they have the same scheme, same host, and same port number. If any of these differ, then the requests are considered to be cross-origin, i.e., not belonging to the same origins.

What do you mean by Cross-Domain?

Let us understand Cross-Domain with some examples.

The following 2 URLs have the same origin

http://localhost:1234/api/Employee/GetEmployees

http://localhost:1234/Home/Index

The following 2 URLs have different origins because they have different port numbers (1234 v/s 5678)

http://localhost:1234/api/Employee/GetEmployees

http://localhost:5678/Home/Index

The following 2 URLs have different origins because they have different domains (.com v/s .net)

http://example.com/api/Employee/GetEmployees

http://example.net/Home/Index

The following 2 URLs have different origins because they have different schemes (http v/s https)

https://example.com/api/Employee/GetEmployees

http://example.net/Home/Index

To prove browsers do not allow cross-domain AJAX calls, let’s create a new ASP.NET MVC application. Name it as MVCClient as shown below.

Open Visual Studio and create a new project

From the Visual Studio context menu, select File => New => Project as shown below

Calling Web API Service in a Cross Domain Using jQuery AJAX - Selecting new project

In the “New Project” window select “Visual C#” under the “Installed – Templates” and from the middle pane select the “ASP.NET Web Application” and name the project as “MVCClient” and then click on the “OK” button as shown in the below image

Cross Domain Using jQuery AJAX - Creating new project

Once you click on the OK button, then a new popup window will open with Name New ASP.NET Project for selecting project Templates and from that window, we are going to select the MVC project template. Next, we need to select the Authentication type for doing that, we just click on the Change Authentication button, a new dialog will pop up with the name “Change Authentication” here we are going to select the No Authentication option and then click on the OK button as shown in the below image.

Calling Web API Service in a Cross Domain Using jQuery AJAX

Once you click on the OK button, It will take some to time create the project for us.

Add an HTML page.

Right-click on the project then select Add => Html Page as shown below

Calling Web API Service in a Cross Domain Using jQuery AJAX

Provide the Name as HtmlPage1.html and click on the Ok button as shown below.

Calling Web API Service in a Cross Domain Using jQuery AJAX

Copy and paste the following HTML and jQuery code in the HtmlPage1.html file.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ulEmployees = $('#ulEmployees');
            $('#btnGetEmployees').click(function () {
                $.ajax({
                    type: 'GET',
                    // Make sure to change the port number to
                    // where you have the employee service
                    // running on your local machine

                    url: 'http://localhost:53009/api/Employees/GetEmployees',
                    dataType: 'json',
                    success: function (data) {
                        ulEmployees.empty();
                        $.each(data, function (index, val) {
                            ulEmployees.append('<li> First Name - ' + val.FirstName + " Last Name - " + val.LastName + " Gender- " + val.Gender + '</li>');
                        });
                    }
                });
            });
            $('#btnClear').click(function () {
                ulEmployees.empty();
            });
        });
    </script>
</head>
<body>
    <div>
        <input id="btnGetEmployees" type="button" value="Get All Employees" />
        <input id="btnClear" type="button" value="Clear" />
        <ul id="ulEmployees" />
    </div>
</body>
</html>

Now first run the Service Project. Then run the HtmlPage1.html file from the client project. When you click on the “Get All Employees” button on the “HtmlPage1.html” page, you get the following error. To see the error launch browser tools and click on the console tab.

Failed to load http://localhost:53009/api/Employee/GetEmployees: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:62611’ is therefore not allowed access.

On the other hand, when you click on the “Get All Employees” button on the “HtmlPage1.html” page that is present in the same project as the ASP.NET Web API Service, the employee data is displayed without any problem. So this proves, browsers do not allow cross-domain AJAX requests. There are 2 ways to get around this problem

  1. Using JSONP (JSON with Padding) 
  2. Enabling CORS (Cross-Origin Resource Sharing)

In this article let’s use JSONP to overcome the browser cross-domain restriction. In our next article, we will discuss enabling CORS. 

What is JSONP and what does it do?

JSONP stands for JSON with Padding. The job of JSONP is to wraps the data into a function. For example, if you have the following JSON object

{    
   “FirstName”: “Pranaya”,
    “LastName”: “Kumar”,
    “Gender”: “Male”
}

JSONP will wrap the data in a function as shown below
CallbackFunction({    
    “FirstName”: “Pranaya”,
    “LastName”: “Kumar”,
    “Gender”: “Male”,
})

Browsers allow consuming JavaScript (JavaScript function) that is present in a different domain but not data. Since the data is wrapped in a JavaScript function, this can be consumed by a web page that is present in a different domain.

Steps to make ASP.NET Web API Service return JSONP formatted data and consume it from a cross-domain AJAX request

Step1: To support JSONP format, execute the following command using NuGet Package Manager Console which installs WebApiContrib.Formatting.Jsonp package.

Install-Package WebApiContrib.Formatting.Jsonp

Step2: Modify the Register() method of WebApiConfig class in WebApiConfig.cs file in App_Start folder of our web API project.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        var jsonpFormatter = new JsonpMediaTypeFormatter(config.Formatters.JsonFormatter);
        config.Formatters.Insert(0, jsonpFormatter);
    }
}

Step3: In the ClientApplication i.e. MVCClient project, set the dataType option of the jQuery ajax function to jsonp 

dataType: ‘jsonp’

Complete Code:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ulEmployees = $('#ulEmployees');
            $('#btnGetEmployees').click(function () {
                $.ajax({
                    type: 'GET',
                    // Make sure to change the port number to
                    // where you have the employee service
                    // running on your local machine

                    url: 'http://localhost:53009/api/Employees/GetEmployees',
                    dataType: 'jsonP',
                    success: function (data) {
                        ulEmployees.empty();
                        $.each(data, function (index, val) {
                            ulEmployees.append('<li> First Name - ' + val.FirstName + " Last Name - " + val.LastName + " Gender- " + val.Gender + '</li>');
                        });
                    }
                });
            });
            $('#btnClear').click(function () {
                ulEmployees.empty();
            });
        });
    </script>
</head>
<body>
    <div>
        <input id="btnGetEmployees" type="button" value="Get All Employees" />
        <input id="btnClear" type="button" value="Clear" />
        <ul id="ulEmployees" />
    </div>
</body>
</html>

Now run the service application first. Then run the client application and navigate to the URL “http://localhost:61757/HtmlPage1.html” and click on Get All Employees which will display all the employees’ information.

In the next article, I am going to discuss how to enable CORS in WEB API to make a cross-domain call using jQuery ajax. Here, In this article, I try to explain Calling Web API Service in a Cross-Domain Using jQuery AJAX with the help of jsonp step by step with a simple example. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

9 thoughts on “Calling Web API Service in a Cross Domain Using jQuery AJAX”

  1. Sascha

    Hey,

    i dont get any results not in this Project “MVC” and not in the previous one.
    the Page starts, the buttons are their, but no result by clicking the buttons.
    Requests with Fiddle and Postman are absolutly fine and i get what i want.
    Maybe anyone has idea.

    Best Regards

    Sascha

    Reply
  2. Paul

    I originally got data from both web pages, because they were both loading on the same port. I changed the port in MVCClient Properties, and I didn’t get data. The new (second) web page is pointing toward the correct Uri with the correct port. However, there was no error in the console. I made the changes to use jsonp, and still did not get data, and there were still no errors in the console. Any idea of what I did wrong?

    Reply
    1. Benjamin

      Checks if the section of the AJAX call ($ .ajax (…)) within the code of our WEB PAGE (CLIENT), points to the correct path of our “WEB API SERVICE” (especially to port number) and verify that DATATYPE is set to ‘jsonp’.

      In addition, the jsonp-package installation and the MediaTypeFormatter configuration must be done in our WEB API SERVICE project and not in the CLIENT project.

      I hope it is useful.

      Reply
    1. Benjamin

      Checks if the section of the AJAX call ($ .ajax (…)) within the code of our WEB PAGE (CLIENT), points to the correct path of our “WEB API SERVICE” (especially to port number) and verify that DATATYPE is set to ‘jsonp’.

      In addition, the jsonp-package installation and the MediaTypeFormatter configuration must be done in our WEB API SERVICE project and not in the CLIENT project.

      I hope it is useful.

      Reply
  4. Benjamin

    Thanks for the article, it works fine.

    People. be careful that the section of the AJAX call ($ .ajax (…)) within the code of our WEB PAGE (CLIENT), points to the correct path of our “WEB API SERVICE” (especially to port number) and verify that DATATYPE is set to ‘jsonp’.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *