这两天遇到一个跨域的业务逻辑,具体如下图:
关于跨域
URL例子 | 说明 | 是否允许通信 |
---|---|---|
http://www.1.com/1.js
http://www.1.com/2.js
|
同一个域名 | 允许 |
http://www.1.com/abc/1.js
http://www.1.com/def/2.js
|
同一域名不同文件夹下 | 允许 |
http://www.1.com:8000/1.js
http://www.1.com/2.js
|
同一域名不同端口 | 不允许 |
https://www.1.com/1.js
http://www.1.com/2.js
|
同一域名不同协议 | 不允许 |
http://www.1.com/1.js
http://123.123.123.12/2.js
|
同一域名,以及对应ip | 不允许 |
http://www.1.com/1.js
http://abc.1.com/2.js
|
主域相同,子域不同 | 不允许 |
http://www.1.com/1.js
http://abc.1.com/2.js
|
同一域名,不同二级域名 | 不允许 |
http://www.1.com/1.js
http://www.2.com/1.js
|
不同域名 | 不允许 |
项目
项目中vue域名为a.com,iframe域名为b.com。明显跨域了。
跨域解决办法很多,常见的 1.jsonp 2.postMessage 3.设置document.domain 主域必须相同子域不同下 4.window.name 通过全局变量的方式 window.parent.xx这种方式获取内容 5.location.hash 传递相关属性 6.服务器转发代理
7.服务器配置CORS接口,CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发XMLHttpRequest请求,从而克服了ajax只能同源使用的限制。
项目的需求是路由跳转,主业务逻辑iframe端完成跳转到vue路由中。不涉及到接口数据请求,尝试使用了 4方法,2方法。其中4方法调用时候,仍然报错 crosse origin错误
不过在同一服务器下,尝试叫后台修改服务器配置允许
Access-Control-Allow-Origin: *
复制代码
未果...
查阅资料使用posteMessage,因为项目是H5打包,新的API可以使用,不考虑兼容。
项目中vue文件main.js定义函数
function receiveMessageFromIframePage (event) {
console.log(event.data,event)
if (event.data.data.includes('backHome')) {
router.push({name: 'home'})
} else if (event.data.data.includes('iframeNOlogin')) {
router.push({name: 'login'})
}
}
window.addEventListener("message", receiveMessageFromIframePage, false);
复制代码
iframe 推出按钮的 的logout.html中绑定事件,这里必须要ready之后绑定。
$(document).function(){
window.parent.postMessage({ data:"backHome" },'*');
}
复制代码
成功~ 准点下班