{"id":12292,"date":"2017-01-17T12:21:00","date_gmt":"2017-01-17T12:21:00","guid":{"rendered":"https:\/\/viewmyprojects.com\/winwirewp\/?p=12292"},"modified":"2023-11-05T14:10:49","modified_gmt":"2023-11-05T14:10:49","slug":"cross-domain-api-access-using-jquery-and-jsonp","status":"publish","type":"post","link":"https:\/\/viewmyprojects.com\/winwirewp\/blog\/cross-domain-api-access-using-jquery-and-jsonp\/","title":{"rendered":"Cross Domain API Access using JQuery and JSONP"},"content":{"rendered":"\n

Overview<\/strong><\/p>\n\n\n\n

In today\u2019s web development, it is pretty common practice to load data using WebApi \/ Rest based service from Client side script (Jquery\/AngularJS). There is no issue when consumer web application and rest\/api services are hosted in the same domain, but when web-based applications are trying to load data from a domain which is not under your control, the chances are that you\u2019ve seen the following message in your browser\u2019s console:<\/p>\n\n\n\n

XMLHttpRequest cannot load http:\/\/external-domain\/service. No \u2018Access-Control-Allow-Origin\u2019 header is present on the requested resource. Origin \u2018http:\/\/my-domain\u2019 is therefore not allowed access.<\/p>\n\n\n\n

In this article, we\u2019ll look at what causes this error and how we can get around it by using jQuery and JSONP to make a cross-domain Ajax call.
<\/em>
What is same origin policy?
<\/strong>
Browsers allow a web page to make AJAX requests only within the same domain. Browser security prevents a web page from making AJAX requests to another domain. This is called same origin policy.<\/p>\n\n\n\n

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, however, they\u2019re often restricted in what they perform by the same-origin-policy. This is an important concept in the browser security model and controls that a web browser may only allow scripts on page A to access data on page B if these two pages have the same origin. The origin of a page is defined as a combination of URI Scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page.<\/p>\n\n\n\n

The following 2 URLs have the same origin
<\/strong>
http:\/\/localhost: 59736\/api\/customers
http:\/\/localhost: 59736\/defualt.html<\/p>\n\n\n\n

The following 2 URLs have different origins because they have different port numbers (59736v\/s 59705)
http:\/\/localhost: 59736\/api\/customers
http:\/\/localhost: 59705\/default.html<\/p>\n\n\n\n

The following 2 URLs have different origins because they have different domains (.com v\/s .net)
http:\/\/Sampletech.com\/api\/Customers
http:\/\/Sampletech.net\/default.html<\/p>\n\n\n\n

The following 2 URLs have different origins because they have different schemes (http v\/s https)
https:\/\/Sampletech.com\/api\/customers
http:\/\/Sampletech.com\/default.html<\/p>\n\n\n\n

To prove browsers does not allow cross domain ajax requests, Lets\u2019s add simple web API which returns the All customer details.
Here is Code Snippet for Web Api:
Customer Model Class:
public class Customer
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Phone { get; set; }
}<\/p>\n\n\n\n

Web Api Controller Class:<\/p>\n\n\n\n

namespace SampleWebApi.Controllers
{
[RoutePrefix(\u201capi\/Customer\u201d)]
public class CustomerController : ApiController
{
\/\/ GET api\/Customer
public IHttpActionResult Get()
{
List CustList = new List();
CustList.Add(new Customer() { ID = 1, FirstName = \u201cGILBERT\u201d, LastName = \u201cSMITH\u201d, Phone = \u201c408629-0589\u201d });
CustList.Add(new Customer() { ID = 2, FirstName = \u201cR\u201d, LastName = \u201cBATTERSBY\u201d, Phone = \u201c919\/489-6792\u201d });
CustList.Add(new Customer() { ID = 3, FirstName = \u201cLEONARD\u201d, LastName = \u201cDOS REMEDIOS\u201d, Phone = \u201c301\/760-2541\u201d });
CustList.Add(new Customer() { ID = 4, FirstName = \u201cITO\u201d, LastName = \u201cTAYLOR-HUNYADI\u201d, Phone = \u201c(02)933-3212\u201d });
CustList.Add(new Customer() { ID = 5, FirstName = \u201cSHIEKELESLAM\u201d, LastName = \u201cSHALA\u201d, Phone = \u201c03\/734-5111\u201d });
CustList.Add(new Customer() { ID = 6, FirstName = \u201cDUNNETT\u201d, LastName = \u201cCHRISTINE\u201d, Phone = \u201c(03)022-2332\u201d });
return Ok(CustList);
}
}
}
If we access above API from browser, the customer Api would return the all existing Customers.
API URL in my system is \u201chttp:\/\/localhost:59736\/api\/Customer\u201d<\/p>\n\n\n\n

Let\u2019s add a new client asp.net web project and adddefault.html Copy and paste the following HTML and jQuery code.<\/p>\n\n\n\n

$(document).ready(function () {
var ulCustomers= $(\u2018#ulCustomers\u2019);<\/p>\n\n\n\n

$(\u2018#btn\u2019).click(function () {
$.ajax({
type: \u2018GET\u2019,
\/\/ Make sure to change the port number to
\/\/ where you have the Customer service
\/\/ running on your local machine
url: \u2018http:\/\/localhost:59736\/api\/Customer\u2019,
dataType: \u2018json\u2019,
success: function (data) {
ulCustomers.empty();
$.each(data, function (index, val) {
var fullName = val.FirstName + \u2018 \u2018 + val.LastName;
ulCustomers.append(\u2018<\/p>\n\n\n\n