JS 跨域
一、概念
跨域是指 从一个域名的网页去访问另一个域名的资源,只要协议、域名、端口有任何一个不同,就被当作是跨域。
这是有浏览器的 同源策略 造成的。所谓同源是指, 域名、协议、端口均相同。
同源策略限制一下几种行为:
1、Cookie、LocalStorage 和 IndexDB(浏览器本地数据库) 无法读取;
2、DOM 和 JS对象无法获取;
3、AJAX 请求不能发送
二、浏览器为什么限制跨域访问呢?
原因在于同源策略 是用来隔离潜在恶意文件的关键机制。如果缺少了同源策略,浏览器很容易受到XSS(跨域脚本攻击)和 CSRF(跨站请求伪造)的攻击。
三、跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
1、通过 JSONP 跨域
原理:通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入(即用 Javascript 动态script,再请求一个带参网址实现跨域通信)。
<script> var script = document.createElement('script'); script.type = 'text/javascript'; // 传参并指定回调执行函数为onBack script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack'; document.head.appendChild(script); // 回调执行函数 function onBack(res) { alert(JSON.stringify(res)); } </script>
服务端返回数据:
onBack({"status": true, "user": "admin"})
JSONP的优缺点:
优点:
1、它不像XMLHttpRequest
对象实现的Ajax请求那样受到同源策略的限制;
2、它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;
3、并且在请求完毕后可以通过调用callback的方式回传结果。
缺点:
1、只能实现 GET 一种请求;
2、只支持跨域HTTP请求这种情况。
注:在 html 中,拥有src属性的元素可以跨域访问资源,src 属性拥有跨域请求的特点。
通过src属性,img可以引用其它站点或图床的图片,大大降低本站的图片持久。
通过src属性,script可以引用CDN的JS文件,加速了浏览器的脚本文件的下载,跨域的数据获取更加高效和方便。
通过src属性,iframe可以嵌入其它站点的页面,可以让页面的框架和可变内容分离,内容引用较为灵活,方便引用其它站点。
不同的是:
使用 img标签 不能访问服务器返回的响应内容,只能单向的发送get请求。
使用 script标签 实现的jsonp跨域可以将服务器响应文本以函数参数的形式返回。
JSONP就是利用了script标签的跨域能力
2、通过 CORS(跨域资源共享)实现跨域
CORS 的基本思想就是使用自定义的 HTTP 头部 让浏览器与服务器进行沟通,决定请求或响应式是成功还是失败。
服务器对于CORS的支持,主要是通过设置 Access-Control-Allow-Origin 来进行的,如果浏览器检测到响应的设置,就允许 AJAX 进行跨域访问。
只需要在后台中加上响应头来允许域请求,在被请求的Response header中加入以下设置,就可以实现跨域访问。
//指定允许其他域名访问 'Access-Control-Allow-Origin:*'//或指定域 //响应类型 'Access-Control-Allow-Methods:GET,POST' //响应头设置 'Access-Control-Allow-Headers:x-requested-with,content-type'
参考博文:http://www.ruanyifeng.com/blog/2016/04/cors.html
3.通过 postMessage 实现跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
1、 页面和其打开的新窗口的数据传递
2、 多窗口之间消息传递
3、 页面与嵌套的iframe消息传递
4、上面三个场景的跨域数据传递
用法: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: 'aym' }; // 向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>