Calling ASP.NET WebAPI Service In A Cross Domain Using JQuery AJAX

As far as Browsers are concerned, there is a concept called Same Origin Policy. First, let us understand what is meant by Same Origin Policy.

• What is Same Origin Policy
  
  Browsers allow a Webpage to make AJAX requests only with the same domain. Browser security prevents the Webpage from making AJAX requests to another domain. This is called Same Origin Policy.

For example - Notice the URL, given below as-

http://localhost:2222/api/employees
http://localhost:2222/Employees.html

Here, in both the URL’s, as shown above, we have same origin; i.e., our localhost and some port number, which is alsothe same. When you see the another example, as shown below-

http://localhost:2222/api/employees
http://localhost:5432/Employees.html

Here, in the URL’s, shown above, they are using different port numbers. These are of different origins because they have different port numbers.

Note - Different domain names can also be from different origins for example-

www.c-sharpcorner.com/api/users
www.c-sharpcorner.net/users.html

Different Origins can have different schemas also, as given below-

http://www.c-sharpcorner.com/api/users
https://www.c-sharpcorner.net/users.html

Now, let’s prove that the Browsers don’t allow cross domain AJAX request. Thus, let’s flip to VS.

Now, in our project, we will add another project, as given below-



Add ASP.NET Web Application, give desirable name as ClientApplication.

Add WebForms Application. When our project creates, add HTML page, as given below-



Now, we want to write AJAX code in our HTML file to call our ASP.NET Web API Service.

In previous articles, we had written the code for calling a Web API Service through AJAX. Now, copy the code and paste it into the newly created HTML page.

 Here, we have to use full URL, given below-



Now, let’s run our solution, as given below-



Look at the port number here and when we call WebAPI Service as api/employees and the port number is different, as given below-



Thus, we got two different port numbers here, which means we have two different origins. Thus, AJAX request is issued from HtmlPage1.html, which is a cross domain AJAX request.

Remember, the Browser security prevents AJAX request for the security reasons. Now, click on Get all Employees button and nothing happens. Click on the Browser developer tools.



You can see the error, as we are getting a cross domain error here.

There are two ways to get around this problem using-

• Using JSONP (JSON with Padding)
• Enabling CORS (Cross Origin Resource Sharing)

What is JSONP?

JSONP stands for JSON with padding. All JSONP wraps the data in a function.

Now, let’s see how to make our ASP.NET WebAPI Service returning JSONP formatted data.
The support for JSONP formatted data is in different Nugget Package. We will install it, using Nugget Package Manager console. Click Tools ->Nugget Package Manager->Nugget Package Manager console.



Type the command and hit enter. This will install the Package and any other dependencies as well.



You will get a message as successfully installed. Now, let’s go to WebAPIcontroller.cs file and lets declare a variable, as given below-



We are getting output in both the URL's with the different port number.

This was all about calling ASP.NET WebAPI Service in a cross domain, using jQuery AJAX.