前端跨域几种方式

Posted wangmeijian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端跨域几种方式相关的知识,希望对你有一定的参考价值。

跨域问题的直接原因是浏览器存在同源策略,浏览器同源指的是:两个页面的协议、端口和主机相同,则两个页面具有相同的源。IE下满足协议、主机相同,就认为是同源。

想象一下,如果没有同源策略,谁都可以修改你站点上的内容,读取你的cookie,后果难以想象

前端跨域的几种方式

修改document.domain

document.domain 用来获取当前网页的域名,document.domain可以被赋值

document.domain只能修改成当前域名的主域名或者基础域名,如当前域名是b.360.cn,那么document.domain只能改成主域名www.360.cn或者基础域名360.cn,改为其它值会提示“参数无效”

如 a.360.cn/x.html 和 b.360.cn/y.html 都将document.domain 改为360.cn 后,两个页面就可以跨域通信了

前提条件:两个域名必须属于同一个基础域名且协议端口一致

隐患:当a.360.cn 遭到攻击后,b.360.cn会有安全隐患

动态创建script

script 不受同源策略限制,在a.360.cn页面中引入b.360.cn的js文件,就可以操作a.360.cn下的cookie、DOM等

通过location.hash传参

a、b、c三个页面,a、c页面同源,b是需要跨域的页面,a页面创建一个iframe指向b页面,b页面根据parent.location.hash 的值去做相应的操作,操作完成后修改parent.location.hash 的值告诉a,a监听自己的hash变化,IE、chrome下,b页面无法直接修改parent.location.hash,需要借助与a同源的c页面,具体做法是,b页面创建iframe指向c页面,b页面改变自己的hash,c页面读取b页面的parent.location.hash去修改a页面的hash,a、c页面同源,c页面可以修改a页面的hash,即parent.parent.location.hash

通过window.name传参

a、b、c三个页面,a、c页面同源,b是需要跨域的页面,a页面创建iframe指向b页面,b页面将数据赋值给window.name,接着修改iframe的src指向c页面,a、c页面同源,参考document.domain方法取得c页面window.name的值,为了安全,获取数据后销毁iframe

POSTMessage

a、b两个页面分别属于http://a.360.cn和http://b.360.cn,两个页面通信

// a.360.cn/a.html内容
<iframe id="iFr" src="b.360.cn/b.html"></iframe>
var iFrame = document.getElementById(‘iFr‘);
var targetOrigin = ‘http://b.360.cn/b.html‘;

iFrame.contentWindow.postMessage(‘message from http://a.360.cn‘, targetOrigin);

// b.360.cn/b.html内容
window.addEventListener(‘message‘, function(event){
    // 安全起见,必须验证消息来源
    if(event.origin === ‘http://a.360.cn‘){
        alert(event.data); // ‘message from http://a.360.cn‘
    }
})

 

JSONP

动态创建script标签加载数据,前端将回调函数名传给服务端,服务端返回回调函数,函数参数是请求过来的数据,将返回值插入页面会自动执行

1)安全问题

2)要确定jsonp请求是否成功并不容易

 

以上是关于前端跨域几种方式的主要内容,如果未能解决你的问题,请参考以下文章

跨域几种方式

跨域几种解决方法

前端跨域的几种方式

vue的跨域方式

跨域以及解决跨域的几种方式

跨域的几种方法