【转】Calling Cross Domain WCF Service using Jquery
2012-10-19 14:15
537 查看
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.
SummaryIn 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.
原文:http://www.dotnet-tricks.com/Tutorial/wcf/X8QN260412-Calling-Cross-Domain-WCF-Service-using-Jquery.html
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: POST 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: closeIn 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
You can define cross domain setting either in web.config or in global.asax file of your wcf service.SummaryIn 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.
原文:http://www.dotnet-tricks.com/Tutorial/wcf/X8QN260412-Calling-Cross-Domain-WCF-Service-using-Jquery.html
相关文章推荐
- Calling a WCF Service using jQuery in SharePoint - the correct way
- Calling a WCF Service using jQuery in SharePoint (Anweshi Deverasetty)
- Cross-Domain AJAX Enabled WCF Service
- Jquery Cross-Domain ajax call using JSONP
- Consuming WCF / ASMX / REST service using JQuery
- Cross-Domain AJAX Enabled WCF Service
- WCF 4.0 service consumed in Silverlight 4.0 with cross domain
- WCF 4.0 service consumed in Silverlight 4.0 with cross domain
- Calling web service using AJAX
- PatentTips - Cross-domain data transfer using deferred page remapping
- jquery call cross-domain webapi owin self-host
- jquery crossdomain post plugin i changed bit test code suite for my env,due to the windows env is not familiar with github operation,i didn't forked form the original resposeritoy
- Calling a WCF service from your Silverlight application
- Gets 403 when calling WCF Service in intranet
- Send and Receive JSON objects to Web Service Methods using jQuery AJAX in ASP.Net
- jquery使用json格式 调用 restful wcf web service
- How to Configure an SSIS Package to Access a Web Service using WCF
- 微软项目技术结构思路 ExtJs/JQuery + Asp.net MVC + Wcf service + Entity Framework
- Using WCF Service Library
- How To Do A JavaScript Cross-Domain POST or GET With jQuery or XMLHttpRequest