web项目跨域问题主要包括跨域通信和跨域上传，下面对这两方面分别做一个分析，具体项目中用哪个方案要看项目具体需求。
跨域通信
- jsonp
- hash
- server proxy
- window.name
- cors
- postmessage
- redirect
jsonp
原理：发起一个GET请求，回调函数带到请求参数中，把数据发送过去
坏处：服务器需要支持jsoncallback参数
好处：业界比较通用的方案，包括打点等操作都可以用类似技术
浏览器支持：chrome/firefox/safari/opera/ie6+
client:
//jquery $(function(){ $.ajax({ url: 'http://bbb.com:8888/crossdomain/jsonp.php', dataType: 'jsonp', jsonp : 'callback', //指定callback参数名 data: {name: 'ysj'} //数据 }).done(function(result){ alert(result) // {code:200} }) }) //实际请求：http://bbb.com:8888/crossdomain/jsonp.php?callback=jQuery111108173922670539469_1410615060808&name=ysj&_=1410615060809 //native js var temp = document.createElement('script'); temp.src = 'http://bbb.com:8888/crossdomain/jsonp.php' + '?callback=jsonpCallback&name=ysj'; //设置callback参数 document.body.appendChild(temp) temp.parentNode.removeChild(temp); function jsonpCallback(result) { alert(result) // {code:200} }
server:
$callback = $_GET['callback']; echo $callback . "({code:200})";
hash
原理：父页面把参数设置设置到子iframe的hash，子iframe监听hash变化，把响应的数据设置到父页面的hash
坏处：需服务器对应支持，目前hash比较常用于路由，用于通信不太合适
好处：无
浏览器支持：chrome/firefox/safari/opera/ie6+
代码略
server proxy：
原理：a域请求b域，在a域设置一个proxy服务器脚本页面，接受a的参数，在通过发起一个http请求拿b域的内容，再返回给a域
坏处：在a域服务器需要增加一个proxy页面
好处：比较通用的方案
浏览器支持：chrome/firefox/safari/opera/ie6+
代码略
window.name
原理：a域请求b域的页面，b加载完后设置响应数据到window.name,再重定向到a的一个页面，此时window.name并没有改变
坏处：b域需重定向到a域的一个处理页面
好处：无
浏览器支持：chrome/firefox/safari/opera/ie6+
代码略
cors（跨域资源共享）:
原理：服务器设置可访问性Access-Control-Allow-Origin: *，浏览器ajax取数据
坏处：需要服务器特殊处理
好处：有比较好的未来
浏览器支持：chrome/firefox/safari/opera/ie10+
代码略
postmessage:
原理：利用html5的postmessage api跨域穿数据
坏处：兼容性
好处：有比较好的未来
浏览器支持：chrome/firefox/safari/opera/ie10+
代码在下面跨域上传中演示
redirect:
原理：a域iframe请求b域，把url带上，b域把response带上，返回到a域的handler页面
坏处：有安全隐患
好处：简单又浏览器支持良好的方案
浏览器支持：chrome/firefox/safari/opera/ie6+
代码在下面跨域上传中演示
跨域上传
- cors
- redirect
- postmessage
cors
原理：利用XMLHttpRequest2+FormData，服务器设置Access-Control-Allow-Origin: *，跨域资源访问这个特性，加上html5的FormData可以发送文件的特性。
坏处：需要服务器设置支持跨域访问 Access-Control-Allow-Origin: *
好处：又比较好的未来
浏览器支持：chrome/firefox/safari/opera/ie10+
client:
document.forms[0].onsubmit = function() {
var xhr = new XMLHttpRequest();
var data = new FormData(document.forms[0]);
xhr.open('POST' , this.action)
xhr.onload = function(){
console.log(xhr.responseText)
}
xhr.send(data)
return false
}
server:
header("Access-Control-Allow-Origin: *");
echo "{code:200}";
redirect
原理：a域表单提交到b域，a的表单target指向a域的一个iframe，b域重定向到a域的结果页面，把数据带上。需要浏览器发送一个redirect参数，服务器检查到有这个参数，则重定向到结果页面，把内容带到参数上面
坏处：服务器和客户端特殊参数redirect处理
好处：支持所有浏览器
浏览器支持：chrome/firefox/safari/opera/ie6+
client:
<form method="post" action="http://bbb.bbb.com:8888/crossdomain/redirect.php" target="_iframe">
<input type="hidden" name="redirect" id="redirect">
<input type="file" name="Filedata">
<button type="submit">submit</button>
</form>
<iframe id="_iframe" name="_iframe"></iframe>
document.forms[0].onsubmit = function() {
document.getElementById('redirect').value = window.location.href.replace(//[^/]*$/,'/result.html?%s'); //设置redirect参数值
var iframe = document.getElementById('_iframe')
iframe.onload = function(){
console.log(iframe.contentDocument
? iframe.contentDocument.body.innerHTML
: iframe.document.body.innerHTML) // {code:200}
}
}
redirect页面
document.body.innerText=document.body.textContent=decodeURIComponent(window.location.search.slice(1)); //把参数中的数据写入文档
server:
$redirect = isset($_REQUEST['redirect']) ?
stripslashes($_REQUEST['redirect']) : null;
$json = '{code:200}';
//有redirect参数，则重定向。需要注意的是服务器需要设置一个白名单，符合的才给予重定向，否则有安全问题
if ($redirect) {
//页面重定向，把返回数据替换掉redirect url中的%s
header('Location: '.sprintf($redirect, rawurlencode($json)));
}
postmessage
原理：a域准备好参数通过postmessage发送到b域的postMessageAPI页面，这个页面把数据用XHR+FormData的方式提交a域请求的url，postMessageAPI再把返回的数据postmesage到a域的页面
坏处：b端服务器需准备一个postmessageAPI页面
好处：有比较好的未来
浏览器支持：chrome/firefox/safari/opera/ie10+
client:
<form method="post">
<input type="file" name="Filedata" id="file">
<button type="submit">submit</button>
</form>
<iframe src="http://bbb.com:8888/crossdomain/postMessage.html"></iframe>
$('form').submit(function(){
var iframe = $('iframe')[0];
//向iframe的postmessate api发送消息
iframe.contentWindow.postMessage({
url : 'http://bbb.com:8888/crossdomain/postMessage.php',
dataType:'json',
data : {
file : $('input[type=file]')[0].files[0] //把文件数据传过去
},
contentType:false,
processData:false
}, iframe.src)
return false;
})
//拿到postmessageAPI返回过来的消息
$(window).on('message', function(e){
var e = e.originalEvent;
alert(e.data) // {code:200}
})
postmesage.html／postmessagetAPI页面
//等待接受消息
$(window).on('message', function(e){
var e = e.originalEvent;
var options = e.data;
var truedata = options.data;
var formdata = new FormData()
for(var prop in truedata) {
formdata.append(prop,truedata[prop]);
}
options.data = formdata;
//向postmessage.php发送ajax请求，都在b域，不跨域
$.ajax(options).always(function(result){
//把响应数据再postmessage到请求的页面
e.source.postMessage(result.responseText, e.origin)
})
})
server: postMessaget.php
echo "{code:200}";
跨子域通用方案
原理：a域aaa.aaa.com,b域bbb.aaa.com。客户端和服务器返回都设置document.domain = 'aaa.com'
坏处：有安全隐患
好处：比较方便
浏览器支持：chrome/firefox/safari/opera/ie7+
server:
//可以设置为客户端传来的domain参数，但需要白名单
<echo> "<script>document.domain='aaa.com'</script>";
<echo> "{code:200}";
此方案有个需要注意的地方：ie下面对长度小于5个字符的短域名不能设置domain,例如www.uc.cn