How to Calling Web API Service in a Cross-Domain Using jQuery AJAX?. The Complete ASP.NET Web API Developer Course 2022 [Videos].

In this Video, I am going to discuss Calling Web API Service in a Cross-Domain Using jQuery AJAX. Please watch our previous Video before proceeding to this Video where we discussed how to consume a Web API service using jQuery AJAX with an example. As part of this Video, 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 browsers 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, lets 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

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

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.

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

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

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

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.

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 Video lets use JSONP to overcome the browser cross-domain restriction. In our next Video, 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.

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

dataType: "jsonp"

Complete Code:

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.