了解前端跨域问题及解决方案（面试逼问）

<script type="text/javascript"> 
　　function jsonpCallback(res) 
　　{ 
　　　　alert(res.msg); 
　　} 
</script> 
<script type="text/javascript"src="http://xxx.com/xx?jsonp=jsonpCallback"></script>

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 传参并指定回调执行函数为callBack
　　script.src = 'http://xxxx.com?callback=callBack';
　　document.head.appendChild(script);// 回调执行函数
　　function callBack(res) {
　　　　alert(JSON.stringify(res));
　　}
</script>

$.ajax({
　　url: 'http://xxxx.com',
　　type: 'get',
　　dataType: 'jsonp', //请求方式为jsonp
　　jsonpCallback: "callBack",//自定义回调函数名
　　data: {}
});

this.$http.jsonp('http://xxx.com', {
　　params: {},
　　jsonp: 'callBack'
}).then((res) => {
　　console.log(res); 
})

（1）父窗口：(http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
　　document.domain = 'domain.com';
　　var res= 'data';
</script>
（2）子窗口：(http://child.domain.com/b.html)
<script>
　　document.domain = 'domain.com';
　　// 获取父窗口中变量
　　console.log('res' + window.parent.res);
</script>

1.a.html：(http://www.domain1.com/a.html)
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
　　var iframe = document.getElementById('iframe');
　　//向b.html传hash值
　　setTimeout(function() {
　　　　iframe.src = iframe.src + '#user=admin';
　　}, 1000);
　　//开放给同域c.html的回调方法
　　function onCallback(res) {
　　　　alert('data from c.html ---> ' + res);
　　}
</script>

2.b.html：(http://www.domain2.com/b.html)
<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
　　var iframe = document.getElementById('iframe');
　　//监听a.html传来的hash值，再传给c.html
　　window.onhashchange = function () {
　　　　iframe.src = iframe.src + location.hash;
　　};
</script>

3.c.html：(http://www.domain1.com/c.html)
<script>
　　//监听b.html传来的hash值
　　window.onhashchange = function () {
　　　　//再通过操作同域a.html的js回调，将结果传回
　　　　window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
　　};
</script>

（1）a.html：(http://www.domain1.com/a.html)
var proxy = function(url, callback) {
　　var state = 0;
　　var iframe = document.createElement('iframe');
　　// 加载跨域页面
　　iframe.src = url;
　　// onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
　　iframe.onload = function() {
　　　　if (state === 1) {
　　　　　　// 第2次onload(同域proxy页)成功后，读取同域window.name中数据
　　　　　　callback(iframe.contentWindow.name);
　　　　　　destoryFrame();
　　　　} else if (state === 0) {
　　　　　　// 第1次onload(跨域页)成功后，切换到同域代理页面
　　　　　　iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
　　　　　　state = 1;
　　　　}
　　};
　　document.body.appendChild(iframe);
　　// 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
　　function destoryFrame() {
　　　　iframe.contentWindow.document.write('');
　　　　iframe.contentWindow.close();
　　　　document.body.removeChild(iframe);
　　}
};
// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
　　alert(data);
});
（2）proxy.html：(http://www.domain1.com/proxy....
　　中间代理页，与a.html同域，内容为空即可。
（3）b.html：(http://www.domain2.com/b.html)
<script>
　　window.name = 'This is domain2 data!';
</script>

（1）a.html：(http://www.domain1.com/a.html)
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script> 
　　var iframe = document.getElementById('iframe');
　　iframe.onload = function() {
　　　　var data = {
　　　　　　name: 'xxx'
　　　　};
　　// 向domain2传送跨域数据
　　iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
　　};
　　// 接受domain2返回数据
　　window.addEventListener('message', function(e) {
　　　　alert('data from domain2 ---> ' + e.data);
　　}, false);
</script>
（2）b.html：(http://www.domain2.com/b.html)
<script>
　　// 接收domain1的数据
　　window.addEventListener('message', function(e) {
　　　　alert('data from domain1 ---> ' + e.data);
　　　　var data = JSON.parse(e.data);
　　　　if (data) {
　　　　　　data.number = 16;
　　　　　　// 处理后再发回domain1
　　　　　　window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
　　　　}
　　}, false);
</script>

（1）原生ajax
// 前端设置是否带cookie
xhr.withCredentials = true;
示例代码：
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('canshu=xxx');

xhr.onreadystatechange = function() {
　　if (xhr.readyState == 4 && xhr.status == 200) {
　　　　alert(xhr.responseText);
　　}
};

（2）jQuery ajax
$.ajax({
...
　　xhrFields: {
　　　　withCredentials: true // 前端设置是否带cookie
　　},
　　crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie
...
});

（3）vue框架
1/axios设置：
axios.defaults.withCredentials = true
2/vue-resource设置：
Vue.http.options.credentials = true