使用jquery跨域调用wcf服务的时候会报如下错误

 1         $.ajax({
 2             url: 'http://localhost:28207/Service1.svc/GetData',
 3             method: 'get',
 4             dataType: 'json',
 5             data: { value: val },
 6             success: function (data) {
 7                 $("label").text("success: " + data);
 8             },
 9             error: function (err) {
10                 $("label").text("error: " + err);
11             }
12         });

之前一直以为跨域的请求只要调用方做修改就可以的,实际解决问题的时候发现服务端wcf的binding配置也需要支持

一、wcf服务端配置

  1. 需要将配置中webHttpBinding属性crossDomainScriptAccessEnabled置为true

  2. 接口得支持GET方式调用 ,因为jquery跨域请求时候的方式就是get

 1  [ServiceContract]
 2     public interface IService1
 3     {
 4         // 跨域调用的话得支持GET方式
 5         [WebInvoke(Method = "GET",
 6             RequestFormat = WebMessageFormat.Json,
 7             ResponseFormat = WebMessageFormat.Json,
 8             BodyStyle = WebMessageBodyStyle.Bare,
 9             UriTemplate = "/GetData?value={value}")]
10         string GetData(int value);
11     }

二、客户端调用

以jsonp的方式调用,表明是跨域请求

 1    var val = $("#txtValue").val();
 2         //  jquery跨域调用jsonp方式
 3         //  jquery会自动填充callback=?中的问号
 4         //  实际调用时请求的url是 http://localhost:28207/Service1.svc/GetData?callback=jQuery1102023912459355778992_1460275935452&value=321&_=1460275935453
 5
 6         $.ajax({
 7             url: 'http://localhost:28207/Service1.svc/GetData',
 8             method: 'get', //这个可以去掉, 因为jsonp默认就是get方式
 9             dataType: 'jsonp',
10             data: { value: val },
11             success: function (data) {
12                 $("label").text("success: " + data);
13             },
14             error: function (err) {
15                 $("label").text("error: " + err);
16             }
17         });

三、结果

可以看到jquery的jsonp跨域调用自动给我们添加一个 callback参数,提供给服务端回调的。

示例代码

跨域也可以通过W3C的一个标准CORS(Cross-Origin Resource Sharing) 跨域资源共享来实现的;

这个标准需要浏览器和服务器同时支持, 就像我上面的例子服务端开启配置(不同的服务框架有不同的设置,也可以直接iis上设置Access-Control-x 等响应头)并且chrome浏览器支持;

参考:   http://www.ruanyifeng.com/blog/2016/04/cors.html

转载于:https://www.cnblogs.com/mushishi/p/5374484.html

jquery跨域调用wcf相关推荐

  1. 【转载】一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)

    一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例) JSONP(JSON with Padding)可以看成是JSON的一种"使用模式",用以解决" ...

  2. jquery跨域调用webService

    jquery跨域调用webService,以及解决跨域情况下只能返回XMl格式数据的问题 http://lu.9efish.com/blog/jquery-cross-domain-call-asp. ...

  3. jQuery跨域调用Web API

    我曾经发表了一篇关于如何开发Web API的博客,链接地址:http://www.cnblogs.com/guwei4037/p/3603818.html.有朋友说开发是会开发了,但不知道怎么调用啊? ...

  4. Jquery跨域调用(JSONP)遇到error问题的解决

    2019独角兽企业重金招聘Python工程师标准>>> 之前Jquery的跨域调用一直没有解决,不知道为什么老是执行error里的语句,今天花了点时间研究了一下,终于把问题解决了. ...

  5. jquery ajax跨域asp,jQuery跨域调用Asp.Net Web API

    Asp.Net Web API是一个轻量级的Web服务,当Web API和Web程序不是部署在同一域的时候,要使用jQuery来实现调用API的接口就存在跨域的问题.下面介绍两种方式来解决jQuery ...

  6. WCF 4.0 REST Service JSON跨域调用

    最近在项目中用到了 WCF4.0 REST.在跨域调用时走了不少弯路,查了不少技术强人的文章,其实它真的就这么容易.好了不废话了直接贴代码. 调用的服务类:  1     [ServiceContra ...

  7. linux c调用wcf服务,Silverlight+WCF实现跨域调用

    在这篇文章中,WCF扮演服务器,向外提供LoginVaild服务:Silverlight扮演客户端,调用WCF提供的LoginVaild服务.思路有了,下面进行代码实现. 数据库脚本实现 新建T_Us ...

  8. java jquery jsonp 跨域_Jquery跨域调用(JSONP)遇到error问题的解决

    之前Jquery的跨域调用一直没有解决,不知道为什么老是执行error里的语句,今天花了点时间研究了一下,终于把问题解决了. 关键的地方是返回的字符串,返回的字符串必须包含jsonp的回调函数名称,而 ...

  9. Jquery跨域获得Json

    这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值, 一般跨域用到的两个方法为:$.ajax 和$.get ...

最新文章

  1. itunes未能连接到iphone_FonePaw iPhone Data Recovery mac版(iphone数据恢复工具)
  2. 32岁被裁,拿N+1,我高兴地失业了
  3. iOS 获取appstore 版本号
  4. mybatis-plus sql注入原理
  5. VS2010 NDoc的插件工具
  6. OxyPlot.SkiaSharp中文显示乱码的问题
  7. 【python命名规范】谷歌风格命名
  8. java cha r转string_JAVA String.format 方法使用介绍
  9. SDN中还有路由协议嘛?
  10. 撩开Docker的面纱
  11. SSLH:让 HTTPS 和 SSH 共享同一个端口
  12. md5util java_Java 工具类 - MD5Util
  13. harmonyos鸿蒙,HarmonyOS鸿蒙入门篇
  14. android可拖动的控件,Android拖动控件的实现,自定义可拖动的LinearLayout
  15. 基因结构图的0_TBtools | 只有序列,怎么做基因结构图?
  16. 数字图像处理实验八--图像分割
  17. 支付宝登录java_支付宝登录java和android
  18. HIT2020春软件构造lab1
  19. 锐龙r5 5600h核显什么水平 r5 5600h属于什么级别
  20. 创业者该怎么快准狠抓住知识付费项目这个机会变现?

热门文章

  1. 电磁场第二章公式总结
  2. 第四周实践项目7 多项式求和
  3. Pytorch Merge操作
  4. 用OneR算法对Iris植物数据进行分类
  5. 第十七讲 利用傅里叶级数求特解
  6. JavaScript中数组的增删改查以及应用方式
  7. Spring MVC 使用拦截器 HiddenHttpMethodFilter配置Rest风格的URL
  8. 自动解析复杂类的属性 实现归档或者进行序列化 反序列话的时候为每一个属性添加序列化方法的繁琐...
  9. C++ 四种强制类型转变与区别之处
  10. 无聊,写写工作日记吧.