SharePoint Pals
 | Sign In
How to achieve the Cross domain WebAPI (Get/Post) call using Ajax request
by Tarun Kumar Chatterjee 5 Nov 2015
Author
.Net – Technology Specialist
Visits   
Today  :   3     Total  :    9097

In this article let me show you the details steps to create a WebAPI and the hosted WebAPI will be invoked from a separate client application. While both the applications are in different domain there would have some issue at the time of Post, here I am trying to cover all those as well. Hope, it would help you guys.

Here are the detail steps I have followed to get the job done.

Start Visual Studio and create a new ASP.NET Web Application project.

Select the Empty project template.

Select the Web API checkbox.

clip_image002

clip_image003

In Model folder add a Class named as “Person”

 public class person
     {
         public string name { get; set; }
         public string surname { get; set; }
     }
 

Add a TestController class within the Controller folder and use the below code snippet

 public class TestController : Controller
     {
         //
         // GET: /Test/
         public ActionResult Index()
         {
             return View();
         }
 
         [HttpPost]
         public string PostData(person objperson)
         {
             return objperson.name;
         }
 
         [HttpGet]
         public string GetData1(string person)
         {
             return "Response From CROSS domain";
         }
         [HttpGet]
         public string GetData2(string person1, string person2)
         {
             return "Response From CROSS domain";
         }
 	}
 

In Gloabal.asax we have Application_Start method & there add the following code

 GlobalConfiguration.Configuration.Formatters.Insert(0, new JsonMediaTypeFormatter());

Build the WebAPI solution, by default it is running in 37167 port in my case.

New let me create a basic client Web application which will invoke Get and Post methods of the WebAPI I have just created

clip_image005

clip_image006

Add a web form named as “TestClient.aspx” and use the below code snippet

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script>
 
         $(document).ready(function () {
 
             var error;
             $("#Save").click(function () {
 
                 var person = new Object();
                 person.name = "Tarun";
                 person.surname = "Chatterjee";
 
                 $.support.cors = true;
 
                 $.ajax({
                     url: 'http://localhost:37167/api/Test/Postdata',
                     data: JSON.stringify(person),
                     contentType: 'application/json; charset=utf-8',
                     dataType: "json",
                     type: "POST",
                     crossDomain: true,
                     success: function (dataReceived) {
                         if (dataReceived) {
                             alert("Welcome " + dataReceived);
                         } else {
                             alert("Authentication failed")
                         }
                     },
                     error: function (e) {
                         alert(e);
                     }
 
                 });
 
             });
 
 
             $("#Get1").click(function () {
                 var person = new Object();
                 var name = "Tarun";
 
 
                 var jsonString = { person: name };
 
                 $.ajax({
                     type: 'GET',
                     url: 'http://localhost:37167/api/test/',
                     contentType: "application/json",
                     dataType: 'jsonp',
                     crossDomain: true,
                     data: jsonString,
                     success: function (dataReceived) {
                         if (dataReceived) {
                             alert("Welcome " + dataReceived);
                         } else {
                             alert("Authentication failed")
                         }
                     },
                     error: function (e) {
                         alert(e);
                     }
                 });
             });
             $("#Get2").click(function () {
                 var person = new Object();
                 var name1 = "Tarun";
                 var name2 = "Chatterjee";
 
 
                 var jsonString = { person1: name1, person2: name2 };
 
                 $.ajax({
                     type: 'GET',
                     url: 'http://localhost:37167/api/test/',
                     contentType: "application/json",
                     dataType: 'jsonp',
                     crossDomain: true,
                     data: jsonString,
                     success: function (dataReceived) {
                         if (dataReceived) {
                             alert("Welcome " + dataReceived);
                         } else {
                             alert("Authentication failed")
                         }
                     },
                     error: function (e) {
                         alert(e);
                     }
                 });
             });
         });
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
         <input type="button" id="Save" value="Save Data" />
         <input type="button" id="Get1" value="Get Data with 1 Parameters" />
         <input type="button" id="Get2" value="Get Data with 2 Parameters" />
     </form>
 </body>
 </html>
 

Now, run the WebAPI and Client application simultaneously.

HttpGet works fine in both IE & Chrome. The problem I have with HttpPost method in chrome but not in IE.

While trying to request HttpPost method it is throwing me the below error:

OPTIONS http://localhost:37167/api/Test/Postdata send @ jquery.min.js:4m.extend.ajax @ jquery.min.js:4(anonymous function) @ TestClient.aspx:21m.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3

TestClient.aspx:1 XMLHttpRequest cannot load http://localhost:37167/api/Test/Postdata. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:37238' is therefore not allowed access. The response had HTTP status code 405.

To resolve the issue I have followed the below steps:

Run the below commands in Package Manager Console

PM> Install-Package NuGet.Core

PM> Install-Package Microsoft.AspNet.WebApi.Cors

clip_image008

Add the below class in App_Start folder

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Net.Http;
 using System.Threading;
 using System.Threading.Tasks;
 using System.Web;
 
 namespace CrossDomainWebAPI.App_Start
 {
     public class CorsHandler : DelegatingHandler
     {
         const string Origin = "Origin";
         const string AccessControlRequestMethod = "Access-Control-Request-Method";
         const string AccessControlRequestHeaders = "Access-Control-Request-Headers";
         const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
         const string AccessControlAllowMethods = "Access-Control-Allow-Methods";
         const string AccessControlAllowHeaders = "Access-Control-Allow-Headers";
 
         protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
         {
             bool isCorsRequest = request.Headers.Contains(Origin);
             bool isPreflightRequest = request.Method == HttpMethod.Options;
             if (isCorsRequest)
             {
                 if (isPreflightRequest)
                 {
                     HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
                     response.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());
 
                     string accessControlRequestMethod = request.Headers.GetValues(AccessControlRequestMethod).FirstOrDefault();
                     if (accessControlRequestMethod != null)
                     {
                         response.Headers.Add(AccessControlAllowMethods, accessControlRequestMethod);
                     }
 
                     string requestedHeaders = string.Join(", ", request.Headers.GetValues(AccessControlRequestHeaders));
                     if (!string.IsNullOrEmpty(requestedHeaders))
                     {
                         response.Headers.Add(AccessControlAllowHeaders, requestedHeaders);
                     }
 
                     TaskCompletionSource<HttpResponseMessage> tcs = new TaskCompletionSource<HttpResponseMessage>();
                     tcs.SetResult(response);
                     return tcs.Task;
                 }
                 else
                 {
                     return base.SendAsync(request, cancellationToken).ContinueWith<HttpResponseMessage>(t =>
                     {
                         HttpResponseMessage resp = t.Result;
                         resp.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());
                         return resp;
                     });
                 }
             }
             else
             {
                 return base.SendAsync(request, cancellationToken);
             }
         }
     }
 }
 

In the TestController class add the following attribute:

[EnableCors(origins: "*", headers: "*", methods: "*")]

Now build the WebAPI solution and run. It throws me the following error:

clip_image010

To resolve the error we need to run the below commands from package manager console

Update-Package Microsoft.AspNet.WebApi –reinstall

uninstall-Package Microsoft.AspNet.WebApi.Cors –Force

Install-Package Microsoft.AspNet.WebApi.Cors.ko -Version 5.0.0

And now all of my dll dependencies are resolved.

Finally run the WebAPI and Client application in Chrome and HttpPost method was working properly.

Here is my web.config code.

 <?xml version="1.0" encoding="utf-8"?>
 <!--
   For more information on how to configure your ASP.NET application, please visit
   http://go.microsoft.com/fwlink/?LinkId=301879
   -->
 <configuration>
   <appSettings>    
   </appSettings>
   <system.web>
     <compilation debug="true" targetFramework="4.5" />
     <httpRuntime targetFramework="4.5" />
   </system.web>
   
   <runtime>
     <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
       <dependentAssembly>
         <assemblyIdentity name="System.Web.Cors" publicKeyToken="31bf3856ad364e35" culture="neutral" />
         <bindingRedirect oldVersion="0.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
         
       </dependentAssembly>
     </assemblyBinding>
   </runtime>
 <system.webServer>
     <handlers>
       <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
       <remove name="OPTIONSVerbHandler" />
       <remove name="TRACEVerbHandler" />
       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
     </handlers>
   </system.webServer></configuration>  
 

Happy Coding

Tarun Kumar Chatterjee

blog comments powered by Disqus

SharePoint Pals

Pals
SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile

Training

Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community




SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to articles@sharepointpals.com in a word document.

Related Resources

Recent Tweets

Twitter January 15, 00:25
How To Enable Target Value And Actual Value In #D3 Gauge Chart https://t.co/VxSi4QnNrC

Twitter January 15, 00:24
How To Open #SharePoint List Hyperlink Column In Modal #Popup Window https://t.co/EQ7HkoZDkX

Twitter January 15, 00:24
Quick Introduction To #Asp.NetCore And It’s Features https://t.co/zAXObHCFpH

Twitter January 15, 00:22
How To Configure #PerformancePoint Services To Use Secure Store In #SharePoint 2013 https://t.co/LEwnUoI7EY

Twitter January 15, 00:21
How To Block Or Disable #Office365 Services https://t.co/Yvp2VPFIRP

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation