高手必看：JavaScript 跨域访问问题 -技术开发专区

高手必看：JavaScript 跨域访问问题

作者：博客园编辑：皮丽华 2011-11-08 10:52 来源：博客园

【IT168 技术】分享一下最近用jQuery跨域请求的经历，希望能给大家一些关于这个方案的概念和资料。该部分包括客户端和服务器端，(如果服务器不在自己手上，那么还是考虑通过自己的服务器转发请求吧)。

　　1.原本的代码很简单。如果是同域名什么问题都没有 (有兴趣的朋友可以尝试在自己的服务器上运行以下代码)

1 $.ajax({  url: "http://www.google.com/",
2 //不同域名，而且google 没有允许第三方提交所以会出错
3 cache: false,   //data: params,

  dataType: 'json',  success:
4 function (data)
5 {console.log(data);
6 },
7 error: function (e)
8 { alert(e.statusText);}
9 }
10 )

嗯，我的默认浏览器是Chrome，会给出Chrome给出的错误提示。

3. 好了现在Chrome中的Get已经可以运行了。在Fiddler中发现客户端提交的是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的跨域提交功能，加点代码很麻烦么！！！）

1 var xdr = new XDomainRequest();        xdr.onload = function (e)
2 {  var data = $.parseJSON(xdr.responseText);
3 if (data == null || typeof (data) == 'undefined')
4 {  data = $.parseJSON(data.firstChild.textContent);
5   }
6 //success        };
7 xdr.onerror = function (e) {            //error        }
8      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）采用普通的ashx来处理。

1 var xdr=new XDomainRequest ();
2 xdr.contentType="application/json"; //异常。。。。。。。

3.xdr.contentType = "text/plain"; //这是唯一可以设置的值。。。。MS。。。我要json不要这个。。。。

附录1用来解决跨域问题的，服务器端代码

1    public class Global : System.Web.HttpApplication
2 { protected void Application_BeginRequest(object sender, EventArgs e)
3 {         if (HttpContext.Current != null && HttpContext.Current.Response != null)
4 {    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();  }
5        }
6    }
7 }

服务器也可以通过放置crossdomain.xml在根目录下指定该逻辑，参考http://www.weibo.com/crossdomain.xml

附录2 用来解决客户端问题的参考代码（代码比较潦草，不过重要的是逻辑）

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

get和post都行了。。。还有文件上传呢。。。这样的POST是不能传文件的（考虑用第三方方案或者不要直接提交）
善用工具例如Fiddler 还有javascript/HTML调试工具（我个人觉得Chrome和FF的调试器比较好用）似乎不少人还习惯用alert调试
IE和safari 跨域iframe有问题，记得设置header，例如： Response.Headers["p3p"] = "CP=IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT";
有兴趣的朋友可以了解一下XSS和CSRF，这可是网站的一大安全问题
分解问题是排查问题的一个很好的办法
更多的时候，使用同域名的代理服务器是很好的解决方案（也是唯一的解决方案，如果浏览器直接调用第三方有权限问题的话）

关注我们