Please enable Javascript to correctly display the contents on Dot Net Tricks!

Calling Cross Domain WCF Service using Jquery

Posted By : Shailendra Chauhan, 26 Apr 2012
Updated On : 04 Oct 2013
Total Views : 64,948   
 

From last couple of days, I was trying to call a wcf service using jquery that is hosted in different domain. But every time I was failed to call wcf service from different domain. After spending much time on R&D, I found the solution and the reason why I was unable to call cross domain wcf service.

Whenever you try to call a cross domain WCF Service by javascript or jquery, it behaves differently with different browsers. When you want to perform "POST" or "GET" request on cross domain wcf service or normal service using jquery/javascript or ajax, the browser actually sends an "OPTIONS" verb call to your wcf service that is not mention in your wcf method attribute. We mention there "POST" or "GET" to call a wcf service method. Hence we get error to call cross domain wcf service. We find the following request and response headers in firefox when we try to call wcf service.

Request Headers

 OPTIONS http://myserver/MyService.svc/GetStates HTTP/1.1
Host: 192.168.4.156 User-Agent: Mozilla/5.0 (Windows NT 6.0; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Proxy-Connection: keep-alive
Origin: http://192.168.4.156:90
Access-Control-Request-Method: OPTION
Access-Control-Request-Headers: content-type
Pragma: no-cache
Cache-Control: no-cache 

Response Headers

 HTTP/1.0 405 Method Not Allowed
Cache-Control: private
Allow: POST
Content-Length: 1565
Content-Type: text/html; charset=UTF-8
Server: Microsoft-IIS/7.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Date: Fri, 04 May 2012 12:05:17 GMT
X-Cache: MISS from c1india.noida.in
X-Cache-Lookup: MISS from c1india.noida.in:3128
Via: 1.0 c1india.noida.in:3128 (squid/2.6.STABLE21)
Proxy-Connection: close 

In above request headers the method is "OPTION" not "POST" and the response headers has content-type "text/html; charset=UTF-8" instead of "json;charset=UTF-8". To change these options we need to do some changes in web.config of hosted wcf service.

Configure WCF Cross Domain service

 namespace CrossDomainWcfService 
{ 
[DataContract] 
public class Supplier 
{ 
 [DataMember] public string Name;
 [DataMember] public string Email; 
}
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService
{
 [OperationContract]
 [WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
 List GetSuppliers (int OrgID)
 { 
// Fetch data from database var q= (from tbl in mobjentity.Customer
 where tbl.OrgID=OrgID).ToList();
 Listlst= new List();
 foreach(var supp in q)
 {
 Supplier msupp=new Supplier();
 msupp.Name=supp.Name;
 msupp.Email=supp.Email
 //Make Supplier List to retun
 lst.Add(msupp);
 }
 return lst;
 } 
} 
} 

WCF Service Web.config

 <system.webServer>
 <modules runAllManagedModulesForAllRequests="true" />
 <httpProtocol>
 <customHeaders>
 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
 </customHeaders>
 </httpProtocol> 
</system.webServer>
 <system.serviceModel>
 <behaviors>
 .
 .
 .
 </behaviors>
 <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
 <standardEndpoints>
 <webScriptEndpoint>
 <standardEndpoint name="" crossDomainScriptAccessEnabled="true" />
 </webScriptEndpoint>
 </standardEndpoints>
 <services>
 .
 . 
</service> 
</services> 
<bindings> 
 .
 . 
</bindings> 
<client> 
 . 
 . 
</client>
</system.serviceModel>

Global.asax Code

You can also define your hosted service web.config setting in Global.asax file. If you have defined setting in web.config then there is no need to do here.

 protected void Application_BeginRequest(object sender, EventArgs e)
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin" , ”*”);
if (HttpContext.Current.Request.HttpMethod == "OPTIONS" )
{ 
//These headers are handling the "pre-flight" OPTIONS call sent by the browser
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods" , "GET, POST" );
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers" , "Content-Type, Accept" );
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age" "1728000" );
HttpContext.Current.Response.End();
} 
} 

Wcf calling using Jquery

 $.ajax({ 
 type: "Post"
 url: "http://www.yourdomain.com/MyService.svc/GetSuppliers", // Location of the service
 data: '{"OrgID"="1"}', //Data sent to server
 contentType: "application/json;charset-uf8", // content type sent to server
 dataType: "json", //Expected data format from server
 success: function (msg) {
 //Implement get data from service as you wish
 },
 error: function (err) {
 // When Service call fails
 }
 }); 

Note

  1. You can define cross domain setting either in web.config or in global.asax file of your wcf service.

  2. For running the code, make a virtual directory/web application on IIS and map the code folder to it.

Summary

In this article I try to explain cross domain wcf service calling with example. I hope after reading this article you will be able to call cross domain wcf service. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article. You can download demo project from below link.


 
Recommended for you
 
About the Author
Shailendra Chauhan

Shailendra Chauhan is an Entrepreneur, Author, Architect, and Corporate Trainer. He has rewarded as Microsoft MVP for his exceptional contributions in Microsoft Visual Studio and Development Technologies.

With more than 7 years in hand experience Shailendra Chauhan is a polymath in the domains of Microsoft .NET technologies and an array of other technologies including JavaScript, AngularJS, Node.js, Ionic and NoSQL Databases to name but a few.

He is the author of some of most popular e-books which encompass technical Interview on Node.js Interview Questions and Answers , ASP.NET MVC Interview Questions and Answers , AngularJS Interview Questions and Answers and LINQ Interview Questions and Answers. Furthermore he is a technical reviewer for book on ASP.NET MVC 4 Mobile App Development. Know more...
 
Free Interview Books
 
10 SEP
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN 05:00 PM-06:30 PM IST

More Details
7 SEP
ASP.NET MVC with AngularJS Development (online)

Weekdays (Mon-Fri) 07:30 AM-09:00 AM IST

More Details
27 AUG
ASP.NET MVC with AngularJS Development (online)

Weekend (Sat, Sun) 03:00 PM-05:00 PM IST

More Details
27 AUG
PPC Marketing (offline)

Sat, Sun 03:00 PM-05:00 PM IST

More Details
26 AUG
NodeJS Development (online)

MON-FRI 06:00 AM-07:30 AM IST

More Details
20 AUG
NodeJS Development (offline)

Sat, Sun     11:00 AM-12:30 PM IST

16 AUG
NodeJS Development (online)

Mon-Fri     09:00 PM-10:30 PM IST

12 AUG
ASP.NET MVC with AngularJS Development (online)

Mon-Fri     09:30 PM-11:00 PM IST

5 AUG
AngularJS Development (online)

Mon-Fri     08:00 PM-09:30 PM IST

1 AUG
ASP.NET MVC with AngularJS Development (online)

Mon-Fri     07:30 AM-09:00 AM IST

24 JUL
AngularJS Development (offline)

Sat,Sun     08:00 AM-09:30 AM

24 JUL
ASP.NET MVC with AngularJS Development (offline)

Sat, Sun     09:30 AM-11:00 AM

14 JUL
PPC Marketing (offline)

Sat, Sun     12:00 AM-02:00 PM IST

11 MAY
.NET Development (offline)

Mon-Fri     9:00 AM-11:00 AM IST

BROWSE BY CATEGORY
 
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 
+