前置知识
跨域:浏览器发送的请求地址(URL)与所在页面的地址 不同(端口/协议/域名 其一不同)。简言之,浏览器发出的请求url,与其所在页面的url,不一样。此时,同源机制会让浏览器拒收 服务器响应回来的数据。
同源机制:浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。(这是 浏览器发送请求的安全机制,和服务器无关,即使服务器返回了请求,此机制也会让浏览器拒收)
(同源策略 场景举例:1发请求--浏览器在一个网站上,需要发送请求到该网站域名上的数据,是可以的,但若请求不是朝该网站域名下的资源,就不可以。也可以修改自己浏览器的跨域设置,但用户不会修改的。2 iframe:一个网站发iframe打开了另一个非同源的网站,但不能操作iframe里的网站的任何资源,如js,否则会危害这个iframe打开的网站)
本域(同源)指的是(下面三者都具备)?
同协议:如都是http或者https
同域名:如都是http://jirengu.com/a 和http://jirengu.com/b
同端口:如都是80端口
本文参考了下面三个博客,尤其第一个非常好,推荐用印象笔记剪藏后查阅,三种方式的具体实现,推荐可参考第一篇:
https://segmentfault.com/a/1190000011145364 (推荐)
https://github.com/hungeraibin/blog/issues/39
https://github.com/hungeraibin/blog/issues/38
三种解决方式
JSONP
JSONP(JSON with padding(添加))是通过 script 标签加载数据的方式,去获取数据,并把数据 当做 JS 代码来执行:提前在页面上声明一个函数,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上「包裹」这个函数名,发送给前端。换句话说,JSONP 需要对应接口的后端的配合才能实现。
jsonp缺点:只能实现get一种请求。JSONP太骇客,不如下面的CORS正统。
//把响应的json数据放入到回调函数的变量中
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
这个请求到达后端后,后端会去解析callback这个参数,获取到字符串showData,在发送数据做如下处理(换言之,前端和后端约定好,让后端支持这么处理):
之前后端返回数据: {"city": "hangzhou", "weather": "晴天"} ,现在后端返回数据: showData({"city": "hangzhou", "weather": "晴天"}) (相当于一个函数)。 前端script标签在加载数据后,会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行,这实际上就是调用showData这个函数,同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载 提前在页面定义好showData这个全局函数,在函数内部处理参数即可。
CORS
CORS 全称是 跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 实现方式很简单,
1 当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin;(浏览器无需做设置 只需发送ajax)
2 后台服务器收到请求后,会进行一系列处理,如果确定接受请求,则在返回结果中加入一个响应头:Access-Control-Allow-Origin (换言之,服务器允许的域url,会加入此响应头,相当于一个凭证);
3 浏览器判断该相应头中是否包含 Origin 的值,如果有,则浏览器会处理响应,我们就可以拿到响应数据,如果不包含,浏览器直接驳回,这时我们无法拿到响应数据。
所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别,代码完全一样。
postMessage(着重,代码演示)
注意:用iframe举例 比较容易理解,方便读者看懂postmessage,实际一般不要用iframe了。更多是前2者。
通过让iframe的js元素,执行postmessage(),以发送消息给iframe访问的url网站,如果网站服务器收到消息(即 监听到了 以该消息为名 的事件)并进行处理,则浏览器可以实现一定程度的跨域。
浏览器发送数据 window.frames[0].postMessage(this.value,'*');
服务器监听跨域请求&浏览器监听返回的数据 window.addEventListener('message',function(e) {})
//参考文章【1】
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: '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>