Ajax跨域调用WCF的实现

最新推荐文章于 2025-06-13 11:52:06 发布

原创最新推荐文章于 2025-06-13 11:52:06 发布 · 6.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #wcf #跨域

C# 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何实现Ajax跨域调用WCF服务，包括配置web.config文件、添加必要的属性和方法、以及实现跨域请求的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需要实现通过ajax去和wcf服务端进行交互，之前也接触过wcf，但是并不是很熟悉，相信这个问题难道了不少人，而网上说的大都比较笼统，就我来说，看了也是知道个大概，想要根据上面说的去实现还要费一番功夫去总结，对于一下所说的我不敢说一定是正确的，但我确实是实现了。废话不多说，下面是我总结出来的具体方法：

首先新建一个wcf服务应用程序的项目

此时目录下会有一个Service1.svc、IService1.cs和一个web.config文件，其中IService1.cs是服务契约接口类，另一个则是具体实现的类，web.config则是程序的配置文件，很重要。首先我们需要先编译一下项目：右键项目---生成。其次需要将服务公布出去让人访问：右键 web.config--编辑WCF配置，打开配置窗口

新建服务--浏览--bin--双击对应项目名的dll（如我的是AjaxWcfServiceKuayu.dll）--双击需要公布的服务（我的是Service1）,此时会回到配置窗口中，其中的服务类型会显示刚刚我们选择的服务（我的是AjaxWcfServiceKuayu.Service1）--下一步--此时会让你选择服务约定，一般默认即可（若有多个服务和约定，则需要自己选择与服务对应的约定）--下一步--下一步--此时会让我们输入终结点地址，留空--是--完成。然后修改终结点名称属性，如图：

继续，在<system.serviceModel>节点下把下面的加上去

然后再在<system.webServer>节点下把下面的加上去

然后再把<behaviors>节点下的内容替换为下面的

把这两个behaviors分别帮到<service><endpoint>节点,同时把service节点的binding的值设置成webHttpBinding,如下

<serviceHostingEnvironment>节点的 aspNetCompatibilityEnabled设置为"true"

到此，配置文件算是完成了。

但是想要实现跨域还需要做其他操作。

首先我们需要让我们的操作类支持ajax，把下面的放到实现类的外

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

放了之后是这样的：

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1 : IService1

另外，要想让ajax访问到wcf的方法，我们定义的接口方法前面要加上这下：

        [OperationContract]
        [WebInvoke(Method = "POST",
         BodyStyle = WebMessageBodyStyle.WrappedRequest,
         ResponseFormat = WebMessageFormat.Json)]
        string GetData(int value);

上面我定义了一个GetData方法，接收一个整形的值

继续，右键项目--添加--新建项，选择全局应用程序类

然后打开，修改Application_BeginRequest方法：

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");

                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }

至于为什么要这样做，据我的理解是ajax向wcf服务端发送请求的时候会发送两个，第一个是“OPTION”,也就是我们方法里的判断条件，如果不加的话请求就通不过，后面的请求也就没用了。

OK，服务端搞定，右键项目重新生成，然后发布，记得发布成文件系统（因为其他的我没试过），发布完成后将发布出来的文件部署到另一台电脑的iis上（别问我为什么要部署到另一台电脑，因为这样子跨域才够彻底，别喷，不赞成的可以换种方法），发布好之后浏览service1.svc，没问题的话会这样显示：

有问题的话就自己解决吧。。。。

好吧，继续

服务搭好了那么是时候测试ajax了，能问道ajax跨域访问wcf的估计都不是什么都不懂的，太具体的我就不说了，我把我的js函数放上来，大家可以参照一下

function CallService() {

$.ajax({
                    type:"POST",
                    url: “http://wcf服务端ip:端口/jzwcfservice.svc/GetData”,
                    data: '“value”:123',
                    contentType: "application/json",
                    processData:true,
                    success:function (msg) {
                        alert(msg);
                    },
                    error:function(err){
                       alert(2);
                    }
                });

}

跑起网页，触发函数，结果如下