JAVA高级面试进阶训练营视频教程

admin

1.什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源（广义），但通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

2.什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同。

3.跨域解决方案
（1）通过jsonp跨域
原理：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。

<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>

服务端返回如下（返回时即执行全局函数）：
callBack({"status": true, "xxx": "xxx"})

二、jquery ajax:jq实现

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

三、vue.js：vue实现

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

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

2、 document.domain + iframe跨域（仅限主域相同，子域不同的跨域应用场景）
实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域；

（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>

3、 location.hash + iframe
实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

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>

4、 window.name + iframe跨域
window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

（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>

总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

5、 postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

（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>

6、 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

1、 前端设置：

（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

7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

后面三种参考该博主 https://segmentfault.com/a/1190000011145364 的nodejs相关介绍。