How to achieve the Cross domain WebAPI (Get/Post) call using Ajax request


Tarun Kumar Chatterjee
.Net – Technology Specialist
Published On :   05 Nov 2015
Visit Count
Today :  6    Total :   10039
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

Sharegate: Kick-Ass Tool
Think Your SharePoint & Office 365 Are Secure ? Find Out Now!


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

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

Migratiin Tools for SharePoint