JavaScript 跨域访问的问题和解决过程
分享一下最近用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
附录2 用来解决客户端问题的参考代码（代码比较潦草，不过重要的是逻辑）
View Code
function cloverGet(url, params, isRenderLoading, callback) {
if ($.browser.msie && parseInt($.browser.version, 10) >= 8 && window.XDomainRequest) {
var xdr = new XDomainRequest();
xdr.onload = function (e) {
var data = $.parseJSON(xdr.responseText);
if (data == null || typeof (data) == 'undefined') {
data = $.parseJSON(data.firstChild.textContent);
}
//需要手动处理json数据
};
xdr.onerror = function (e) {
}
xdr.open("GET", url);
xdr.send();
}
else {
$.ajax({
url: url,
cache: false,
data: params,
dataType: 'json',
success: function (data) {
},
error: function (e) {
},
complete: function (e) {
},
beforeSend: function (xhr) {
}
});
}
}
function cloverPost(url, params, callback) {
if ($.browser.msie && parseInt($.browser.version, 10) >= 8 && window.XDomainRequest) {
var xdr = new XDomainRequest();
xdr.contentType = "text/plain";
xdr.onload = function () {
var data = $.parseJSON(xdr.responseText);
if (data == null || typeof (data) == 'undefined') {
data = $.parseJSON(data.firstChild.textContent);
}
//需要手动格式化
};
xdr.onerror = function (e) {
}
xdr.open("POST", url);
xdr.send(params); //这里的数据是 a=1&b=2这样的
}
else {
$.ajax({
type: "POST",
url: url,
data: params,
// dataType: "json", //有的时候jsonp也是一个选择
crossDomain: true,
success: function (data) {
},
error: function (e) {
},
complete: function (e) {
},
beforeSend: function (xhr) {
}
});
}
}
- 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，这可是网站的一大安全问题
- 分解问题是排查问题的一个很好的办法
- 更多的时候，使用同域名的代理服务器是很好的解决方案 （也是唯一的解决方案，如果浏览器直接调用第三方有权限问题的话）
本人水平有限，如果有所遗漏和谬误，请各位朋友指正，希望一起讨论学习和进步
