跨域原理和跨域方法
今天校招收简历时，一位面试官问我跨域的原理和方法，我只说了前端用jsonp后端用cors，原理没说上来，方法也没说全，所以特别找了资料补充自己的知识库。
跨域
是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制，那么只要协议、域名、端口有任何一个不同，都被当作是不同的域。
跨域解决方案
1.JSONP
2.window.name + iframe
3.hash + iframe
4.postMessage
5.CORS
6.WebSocketsCORS
CORS
PS: 我使用node作为后台语言，开启两个服务器localhost:3000和localhost：1234 来模拟跨域访问
这个是最简单无脑的，不过跟前端没什么关系，这是后台的写。后台在返回的头部中写 Access-Control-Allow-Origin:xxxx（xxxx 为被允许访问的源）这样就搞定啦。
router.get('/cors', function (req, res) {
res.set('Access-Control-Allow-Origin','http://localhost:1234');
res.send('Mid-Autumn is a lonely day');
});
// 跨域访问： localhost:1234 页面下访问localhost:3000/cors
$.ajax({
url: "http://localhost:3000/cors",
success: function (data) {
alert(data);
}
});
缺点：不能携带cookie信息，不能使用自定义请求头部，需要兼容IE浏览器。
JSONP
也是个简单的方法，这个是前辈们钻空子想出来的方法。
大概原理是这样的：
1.在全局定义一个funName函数 2.在页面中创建一个script，src格式为：url+?cb=funName&key1=value1。
3.后台定义一个接口来接受cb,key 等参数，逻辑计算，返回格式为字符串：funName({prop:value});
$(function () {
var btn = $('button');
btn.on('click', function () {
JSONP({
url: 'http://localhost:3000/jsonp',
data: {
name: 'ahole',
goddness: 'GillianChung'
},
jsonp:'ahole',
success: function (data) {
alert(data.name + '\'s Goddness is ' + data.goddness);
}
})
})
function JSONP(data) {
var script = $('<script>'),
src = data.url,
callback = data.success,
randomName = 'Ahole',
query = data.data;
src = src + '?' + data.jsonp + '=' + randomName + '&';
for(var key in query){
src= src + key + '=' + query[key] + '&';
}
// 最后的src格式
// 'http://localhost:3000/jsonp?ahole=Ahole&name=ahole&goddness=GillianChung&';
script.attr('src',src);
document.body.appendChild(script[0]);
// 定义全局函数，方便jsonp得到的函数执行
window[randomName] = function(arg){
data.success(arg)
}
}
})
// node.js
router.get('/jsonp', function (req, res) {
var functionName = req.query.ahole;
var data = {
name:req.query.name,
goddness:req.query.goddness
};
// 这里需要转为string，别忘了我要的是一份拼接的字符串，看做是你用node来写.js。
data = JSON.stringify(data);
res.send(functionName+'('+data+')');
res.end();
})
补充：
1.script的src不一定要是.js结尾。比如本例子。
2.抱歉！我的JSONP是模仿jQuery写的，但有很多细节没有处理，比如在windows下添加变量，但其实jQuery也是这么做的，只是他在执行完回调之后把值换回去了，所以原理是对的。有空可以去看下jQuery的源码，还是挺不错的。
window.name + iframe
很明显，JSONP的致命缺点就是只能使用GET，这个改变不了，就像我是个废材是事实。没错window.name + iframe 的组合能实现post版本的JSONP。这个比较绕。
原理:
1.可以通过js操作没有设置src的iframe，通过他来发送跨域请求。
2.window.name 这个值通过window.href = xxx 之后也不会删除或者改变，可以通过这个特点来传递跨域请求后的返回值。
关键代码与解析
var form = $('form');
// 个人定义的函数接口
form.on('submit',function (e) {
// 利用serialize方法来得到即将提交表单的数据
var data = $(this).serialize()；
e.preventDefault();
postJSONP({
url:'http://localhost:1234/postjsonp',
// dataString 的格式为 key=value&key2=value2
dataString:data,
success:function(data){
alert(data);
}
});
})
function postJSONP(data){
var query = data.dataString,
$iframe = $('<iframe style="display:none">'),
index,$input,
$form = $('<form>');
// 初始化iframe
$('body').append($iframe);
$form.attr({
'action':data.url,
'method':'POST',
});
// 创建表单
if(query){
query = query.split('&');
for(index in query){
$input = $('<input>');
$input.attr({
type:'input',
name:query[index].split('=')[0],
value:query[index].split('=')[1]
})
$form.append($input);
}
$form.append($('<input type="submit" value="submit">'))
}
$iframe.contents().find('body').append($form);
// 提交表单 ，这里要注意的是如果请求成功那么，我们就失去了对iframe内部元素的访问权利。
$iframe.contents().find('form').submit();
/*
* state 变量用于标示是否跳转到同源页面
* onload 事件每次我们改动iframe的地址重新下载一次iframe，成功下载即触发，本例顺利的话触发两次
*
* /
$iframe.state = 0;
$iframe.on('load',function () {
if($iframe.state === 0){
$iframe.state = 1;
// 跳转到同源页面，为了避免不必要的流量，最好下载一个同源的空白页面
this.contentWindow.location.href = 'http://localhost:3000';
}else if($iframe.state === 1){
// 调用成功回调函数，以name为参数。
data.success(this.contentWindow.name);
}
})
}
node.js
router.post('/postjsonp',function(req,res){
// 我是后台，window.name 我想写啥就写啥
res.send('<script>window.name="Ahole is a good boy"</script>');
res.end();
})
