JavaScript 跨域访问的问题和解决过程

来源：互联网发布：淘宝达人怎么找编辑：程序博客网时间：2024/06/01 09:59

分享一下最近用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 请在这里查看详细，http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

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在根目录下指定该逻辑，参考http://www.weibo.com/crossdomain.xml

利用JQuery实现更简单的Ajax跨域请求

前一阵发过一篇利用ExtJs的ScriptTagProxy实现Ajax跨域请求的文章(http://www.cnblogs.com/yjmyzz/archive/2008/09/14/1290789.html)，这几天看了一下Jquery，发现如果用JQuery中的getScript其实更简单(jquery 1.2.6版本)

这里给出代码，希望对Ajax跨域感到棘手的朋友有所帮助:


<html>
<head>
<title>JQuery学习</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var oBtnTest = $("#btnTest");
    oBtnTest.click(function(){
        oBtnTest.disabled = true;    
        var oResult = $("#result");
        oResult.html("loading").css("color","red");
        jQuery.getScript("http://app.cntvs.com/test/js.txt", 
        function(){            
            oResult.html("name:" + jimmy.name + "<br/>email:" + jimmy.email).css("color","black");            
            oBtnTest.disabled = false;            
        });         
    });    
});    
</script>
</head>
<body>
<button id="btnTest">BtnTest</button>
<div id="result"></div>
</body>
</html>

远程服务器端js.txt的内容为:
var jimmy = {name:"jimmy.yang",email:jimmy.yang@163.com}

感觉是不是比ExtJs的ScriptTagProxy还要简洁? 个人感觉Jquery简单明了，短小精干，ExtJs功能强大，组件丰富！

欢迎转载，但请保留来源：菩提树下的杨过 http://www.cnblogs.com/yjmyzz/archive/2008/09/23/1296818.html

作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。