本文共 3894 字，大约阅读时间需要 12 分钟。
分享一下最近用jQuery跨域请求的经历，
希望能给大家一些关于这个方案的概念和资料。
该部分包括客户端和服务器端，（如果服务器不在自己手上，那么还是考虑通过自己的服务器转发请求吧）
1.原本的代码很简单。。如果是同域名什么问题都没有 （有兴趣的朋友可以尝试在自己的服务器上运行以下代码）
$.ajax({ url: "http://www.google.com/", //不同域名，而且google 没有允许第三方提交所以会出错 cache: false, //data: params, dataType: 'json', success: function (data) { console.log(data); }, error: function (e) { alert(e.statusText); } }) 嗯，我的默认浏览器是Chrome， 上去一跑。。。当然不能用。。。什么都还没做呢，就想做跨域访问这么危险的事情
下面是Chrome给出的错误提示
2.在服务器端做点手脚，
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // 可以设置为详细的地址 3. 好了现在Chrome中的Get已经可以运行了，依葫芦画瓢开发了Post方法。。。。发现Post不能用。。。。- -# 真是不顺利啊
在Fiddler中发现客户端提交的是OPTIONS的请求。。。。恩。。。。。那就加一段逻辑处理OPTIONS
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // 可以设置为详细的地址 if (HttpContext.Current.Request.HttpMethod == "OPTIONS") // 加点逻辑 { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With"); HttpContext.Current.Response.End(); } 实际运行中有两次请求 第一次是OPTIONS 第二次才是POST
4.还有问题。。。。忽然发现在IE8和IE9中无法运行，而在其他的浏览器中都正常（opera未测试，google说这个浏览器也有问题。不过这东西比较小众）
使用Fiddler发现 这个动作根本没有被提交到服务器端。。。。
经常Google以后发现。。。。IE8以上的版本跨域提交需要使用XDomainRequest 对象。。。。（IE 为什么每次你都这么另类！，jQuery你为什么不兼容ie8和ie9的跨域提交功能。。加点代码很麻烦么！！！）
var xdr = new XDomainRequest(); xdr.onload = function (e) { var data = $.parseJSON(xdr.responseText); if (data == null || typeof (data) == 'undefined') { data = $.parseJSON(data.firstChild.textContent); } //success }; xdr.onerror = function (e) { //error } xdr.open("GET", url); xdr.send(); 关于 XDomainRequest 请在这里查看详细，
5.恩 get功能在ie中也可以了。。。不错不错， POST还不行。。。莫非又是IE的问题？？ 这。。怎么每个功能都这么多问题？
奇怪的是Fiddler中显示IE8 中POST请求确实发出去了啊。。。怎么回事？？
把问题分解来看，吧fiddler获取的http request raw数据拿出来 单独提交试试。。。也不行？！ 服务器返回415。。。 看来好像不是ie的问题。（这次冤枉了它了）
仔细排查，发现缺少Content-Type（Content-Type其实不是必须的，参考RFC）
这坑爹的WCF 3.5啊， 不传Content Type就给我报415异常 （WCF 4.0已经解决这个问题，3.5解决起来很麻烦，我一怒之下用了普通的ashx来处理）
.....嗯。。。少什么我加什么。。。 what?!!! XDomainRequest 不能随便设置header，
var xdr=new XDomainRequest ();xdr.contentType="application/json"; //异常。。。。。。。xdr.contentType = "text/plain"; //这是唯一可以设置的值。。。。MS。。。我要json不要这个。。。。
好吧javascript这边设置失败了。。只能去服务器动手脚。。。想死的心都有了。。。。做点功能怎么这么麻烦。。。
到此为止，总算告一个段落了。。。
附录1
用来解决跨域问题的，服务器端代码
public class Global : System.Web.HttpApplication { protected void Application_BeginRequest(object sender, EventArgs e) { if (HttpContext.Current != null && HttpContext.Current.Response != null) { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // take care if (HttpContext.Current.Request.HttpMethod == "OPTIONS") { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With"); HttpContext.Current.Response.End(); } } } } 服务器也可以通过放置crossdomain.xml在根目录下指定该逻辑，参考
前一阵发过一篇利用ExtJs的ScriptTagProxy实现Ajax跨域请求的文章()，这几天看了一下Jquery，发现如果用JQuery中的getScript其实更简单(jquery 1.2.6版本)
这里给出代码，希望对Ajax跨域感到棘手的朋友有所帮助:
JQuery学习
远程服务器端js.txt的内容为:
var jimmy = {name:"jimmy.yang",email:jimmy.yang@163.com}
感觉是不是比ExtJs的ScriptTagProxy还要简洁? 个人感觉Jquery简单明了，短小精干，ExtJs功能强大，组件丰富！
欢迎转载，但请保留来源：菩提树下的杨过
出处：
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
转载地址：https://blog.csdn.net/lifan_3a/article/details/8824249 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
