JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

时间:2021-08-24 22:40:46

JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

最近在开发WSS RESTful服务的时候, 碰到了这些个纠结的问题. 在网上查找了半天, 找到n多种解决方案, 但是都是部分的, 要么是没有跨域的情况, 要么是没有post的情况, 要么不是用WCF进行开发. 可就是没有一个解决方案是将所有元素揉合在一起的, 真是奇怪, 然道我研究的是小众?

呵呵, 闲话少说, 直接上陷阱和解决方案:

1. UriTemplate要和<endpointBehaviros><behavior><webHttp>配合使用

用WCF开发REST就不用多说了. 唯一需要注意的是如果使用了UriTemplate来定义REST接口地址, 那么EndpointBehavior不能够继续使用<enableWebScript/>了, 而要改成使用<webHttp/>, 对应的, 在<service><endpoint>中behaviorConfiguration也要设置成WebBehavior.

JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
      <endpointBehaviors>
<!--<behavior name="AjaxBehavior">
<enableWebScript/>
</behavior>-->
<behavior name="WebBehavior">
<webHttp />
</behavior>
</endpointBehaviors>
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

2. 为WebOperation指定输入输出的格式

由于使用了webHttp behavior, 我们需要在ServiceContract中显示指定WebOperation的输入输出msg格式. 否则会在运行时报错找不到对应的序列化反序列化器.

[OperationContract(Name="CreateNew")]
[WebInvoke(RequestFormat=WebMessageFormat.Json, ResponseFormat=WebMessageFormat.Json, UriTemplate="/users", Method="POST")]
string CreateNew(WSSAccount account);

3. 为了满足JQuery.Ajax, 需要改造WCF RESTful service

这一步困扰了我好久, JQuery.Ajax在POST的时候是没法设置ContentType的. 网上好多人讨论这个问题, 我想应该是一个bug或者至少是一个设计的限制. 整体表现就是设置了没有任何效果. 在这种情况下去调用WCF写的RESTful Service就坑爹了. 因为JQuery.Ajax在POST的时候永远将contentType设置成application/x-www-unencoded; 而WCF默认的ContentTypeMapper永远只在收到ContentType=application/json的时候才会用JSON来解析Body中的数据...

没办法了, 只有改写ContentTypeMapper:

JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
    public class RESTContentTypeMapper : WebContentTypeMapper
{
public override WebContentFormat GetMessageFormatForContentType(string contentType)
{
if (contentType.IndexOf("json", StringComparison.CurrentCultureIgnoreCase) != -1)
{return WebContentFormat.Json;
}
else if (contentType.IndexOf("xml", StringComparison.CurrentCultureIgnoreCase) != -1)
{return WebContentFormat.Xml;
}
else
{return WebContentFormat.Json;
}
}
}
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

强行将WebContentFormat.Json作为默认格式, 然后在<system.serviceModel><standardEndpoints>中配置如下:

    <standardEndpoints>
<webHttpEndpoint>
<standardEndpoint name="RESTEndpoint" contentTypeMapper="Webus.WSS.Core.RESTful.RESTContentTypeMapper, Core" />
</webHttpEndpoint>
</standardEndpoints>

注意, 这个standardEndpoints只在.net4.0/4.5中才有效, 如果你用的老版本, 那还是算了吧. 配置好了之后, 在<service><endpoint>中endpointConfiguration要设置成"RESTEndpoint", kind要设置成"webHttpEndpoint".

下面来一个完整的配置例子:

<system.serviceModel>
<services>
<service name="s_Authentication" behaviorConfiguration="DefaultBehavior">
<host>
<baseAddresses>
<add baseAddress="http://wss.gdtsearch.com/wss/services/test.Authentication" />
</baseAddresses>
</host>
<endpoint name="Authentication_Web"
address="Authentication_Web"
binding="webHttpBinding"
bindingConfiguration="webHttpBindingJSONP"
contract="Webus.WSS.Core.Authentication.IWSSAuthentication"
behaviorConfiguration="WebBehavior"
endpointConfiguration="RESTEndpoint"
kind="webHttpEndpoint"
bindingNamespace="http://gdtsearch.com/wss/services/Authentication" />
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
</service>
</services>
<standardEndpoints>
<webHttpEndpoint>
<standardEndpoint name="RESTEndpoint" contentTypeMapper="Webus.WSS.Core.RESTful.RESTContentTypeMapper, Core" />
</webHttpEndpoint>
</standardEndpoints>

<behaviors>
<endpointBehaviors>
<!--<behavior name="AjaxBehavior">
<enableWebScript/>
</behavior>-->
<behavior name="WebBehavior">
<webHttp />
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior name="DefaultBehavior">
<serviceMetadata httpGetEnabled="True"/>
<serviceDebug includeExceptionDetailInFaults="True"/>
</behavior>
</serviceBehaviors>
</behaviors>

<bindings>
<webHttpBinding>
<binding name="webHttpBindingJSONP" crossDomainScriptAccessEnabled="true"/>
</webHttpBinding>
</bindings>
</system.serviceModel>

4. JQuery.Ajax - crossDomain要设置为true / post的数据要首先转换成JSON格式

我用于POST数据的代码如下, 却总是得到一个HTTP400的错误, 打开Fiddler一看, 发现Body中的数据根本不是JSON格式, 而是普通的类似于querystring中的name-Value组合的字符串.

JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
    function createNewAccount(email, password) {var account = {
"Email": email,
"Password": CryptoJS.MD5(password).toString(CryptoJS.enc.Base64),
"Enabled": true
}; $.ajax({
type: "POST",
crossDomain: true,
url: "http://wss.gdtsearch.com/wss/services/test.Authentication/Authentication_Web/users",
data: account,
dataType: "json",
success: function(msg) {
alert(msg);
},
error: function(a, b, c) {
alert(a + b + c);
}
});
}
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

没办法, 只好手动将数据转换成JSON了, 好在我找到了一个不错的plugin: https://code.google.com/p/jquery-json/. 代码简单改改就能够用了:

JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
        $.ajax({
type: "POST",
crossDomain: true,
url: "http://wss.gdtsearch.com/wss/services/test.Authentication/Authentication_Web/users",
data: $.toJSON(account),
dataType: "json",
success: function(msg) {
alert(msg);
},
error: function(a, b, c) {
alert(a + b + c);
}
});
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

5. JQuery.ajax的跨域只支持XMLHTTPRequest

一切就绪之后, 终于可以开始测试了. 打开Chrome, 打开Fiddler, 访问页面, 点击按钮运行,,, ,,, ,,, 浏览器貌似正常, Fiddler得到一个HTTP200~! 唯一的遗憾是Chrome的Console会出现一个跨域的JS错误. 看来通过设置crossDomain=true确实可以进行跨域访问, 但是并不完美.

打开IE, 再次测试,,, 报错!? Fiddler中没有任何反应, 甚至连Request都没有发出去, 奇怪? googling... 答案在*的一篇文章中找到: http://*.com/questions/3362474/jquery-ajax-fails-in-ie-on-cross-domain-calls

OTOH, this page mentions that IE7 and eariler cannot do cross domain calls, but IE8 can, using a different object than XMLHttpRequest, the one JQuery uses. Could you check if XDomainRequest works?

也就是说IE8用的所谓XDomainRequest而非XMLHttpRequest, 但是JQuery只支持XMLHttpRequest... 所以想用IE的同学就断了这个念想吧...

小结 - 

研究了两天, 总算将JQuery.Ajax + crossDomain + POST + JSON + WCF RESTful 串起来跑通了, 可是也只能够在Chrome上面跑, FF和Safari没有试, 但是我估计能够行. 硬伤是IE不行, 没想到是这么个结果, 太遗憾了. 不过要实现功能, 也并非无路可走, 关键还是要看你在ServiceContract中要不要用UriTemplate, 如果你能够放弃自己设计RESTful接口的主张, 全盘接受微软的一套, 那么简单用<enableWebScript>+JSONP就行啦; 如果你坚持自己设计RESTful接口, 不妨考虑用NodeJS搭建一个本地的proxy svc来解决跨域的问题. 反正仁者见仁, 智者见智, 动手能力强的TX们自己取舍吧.

 
 
分类: 其它

JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案的更多相关文章

  1. &lbrack;经验&rsqb; - JQuery&period;Ajax &plus; 跨域 &lpar;crossDomain&rpar; &plus; POST &plus; JSON &plus; WCF RESTful&comma; 5大陷阱和解决方案

    最近在开发WSS RESTful服务的时候, 碰到了这些个纠结的问题. 在网上查找了半天, 找到n多种解决方案, 但是都是部分的, 要么是没有跨域的情况, 要么是没有post的情况, 要么不是用WCF ...

  2. jQuery &dollar;&period;ajax跨域-JSONP获取JSON数据(转载)

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  3. NodeJ node&period;js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  4. 关于JQuery Ajax 跨域 访问&period;net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  5. jquery&plus;ajax跨域请求webservice

    最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...

  6. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  7. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

  8. jquery ajax跨域的完美解决方法&lpar;jsonp方式&rpar;

    ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码     今天在项目中需要做远程数据加载 ...

  9. AJAX跨域POST发送json时,会先发送一个OPTIONS预请求

    我们会发现,在很多post,put,delete等请求之前,会有一次options请求. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content ...

随机推荐

  1. CSS权威指南 - 基础视觉格式化 3

    行内替换元素 替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片. 这个图片依然有一个line-height,和 ...

  2. 基于私钥加密公钥解密的RSA算法C&num;实现

    RSA算法是第一个能同时用于加密和数字签名的算法,也易于理解和操作. RSA是被研究得最广泛的公钥算法,从提出到现在已近二十年,经历了各种攻击的考验,逐渐为人们接受,普遍认为是目前最优秀的公钥方案之一 ...

  3. 【iis错误码】IIS 服务 这些年遇到的错误码

      II 发生错误,客户端似乎有问题.例如,客户端请求不存在的页面,客户端未提供有效的身份验证信息. 400 - 错误的请求. 401 - 访问被拒绝.   -- 暴力添加everyone用户,  i ...

  4. poj 3641 Pseudoprime numbers(快速幂)

    Description Fermat's theorem states that for any prime number p and for any integer a > 1, ap = a ...

  5. ionic3&period;0--angular4&period;0 引入第三方插件库的方法

    ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings  2.搜索你 ...

  6. java并发编程笔记3-同步容器&amp&semi;并发容器&amp&semi;闭锁&amp&semi;栅栏&amp&semi;信号量

    一.同步容器: 1.Vector容器实现了List接口,Vector实际上就是一个数组,和ArrayList类似,但是Vector中的方法都是synchronized方法,即进行了同步措施.保证了线程 ...

  7. linux学习:curl与netcat用法整理

    CURL 语法: curl [option] [url] 常用参数:-A/--user-agent <string> 设置用户代理发送给服务器-b/--cookie <name=st ...

  8. MYSQL 优化常用方法总结

    1, 选取最合适的字段属性以及长度 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快. 比如:定义邮政编码 char(6) 最合适,如果char(2 ...

  9. 安装SQL Server 2008数据库(带完整图解)

    方法/步骤   1 双击sql server 2008的.exe安装文件,进入[SQL Server 安装中心]. 2 点击界面左侧的[安装],然后点击右侧的[全新SQL Server 独立安装或向现 ...

  10. Apache Prefork、Worker和Event三種MPM分析

    三種MPM介紹 Apache 2.X  支持插入式並行處理模塊,稱爲多路處理模塊(MPM).在編譯apache時必須選擇也只能選擇一個MPM,對類UNIX系統,有幾個不同的MPM可供選擇,它們會影響到 ...