前端跨域几种方式

跨域问题的直接原因是浏览器存在同源策略,浏览器同源指的是:两个页面的协议、端口和主机相同,则两个页面具有相同的源。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请求是否成功并不容易

时间: 2024-10-11 12:39:43

前端跨域几种方式的相关文章

前端跨域的解决方式

前端与服务端数据交互时,涉及到跨域的一些问题.JavaScript出于安全的考虑,禁止了跨域调用其他页面的对象,也即同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式. 什么是跨域? 如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就属于同一个源(origin),JavaScript允许这种同源页面的数据互相通信. 带来的麻烦,以及解决方案 同源策略让JavaScript或Cookie只能访问同域下的内容,但在

跨域几种方式

一.什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象.当协议.子域名.主域名.端口号中任意一个不相同时,都算作不同域.不同域之间相互请求资源,就算作"跨域".例如:http://www.abc.com/index.html 请求 http://www.efg.com/service.php. 有一点必须要注意:跨域

跨域三种方式

一.什么是跨域,跨哪些域 协议(http.https)   域名(ip)   端口号(80.8080) 二.前后端分离为什么要跨域 如果前后端没分离那么都在同一个服务器中,请求协议.域名以及端口一致自然不存在跨域问题 前后台分离之后前后台有可能分开部署,也有可能使用不同端口,会存在跨域问题 三.跨域实际上是浏览器级别的限制 我们在发出请求以及获取响应的时候实际上是成功了,但是由于浏览器做了拦截处理,所以无法获取数据 四.跨域知道的有三种         1.jsonp    只能适用get请求

解决前端跨域请求的几种方式

利用 JSONP 实现跨域调用 说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题.其原理是根据 XmlHttpRequest 对象受到同源策略的影响,而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料.用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句. 1.2

前端跨域问题的几种解决方案

前端跨域问题 一:同源策略 1.what's this 所谓同源是指,域名,协议,端口相同.当浏览器运行一个JS脚本时会进行同源检测,如果不同源是不能执行的. 2.源继承 来自about:blank,javascript:和data:URLs中的内容,继承了将其载入的文档所指定的源,因为它们的URL本身未指定任何关于自身源的信息. 3.变更源 变更源可以实现基础域相同的不同页面的跨域问题. 如:a.baidu.com/index.html 通过 iframe 引入 b.baidu.com/ind

前端跨域的方式

.前端跨域的方式 前端跨域的方案: 1.通过jsonp跨域 2.document.domain+iframe跨域 3.location.hash+iframe 4.window.name+iframe跨域 5.postMessage跨域 6.跨域资源共享(CORS) 7.nginx代理跨域 8.nodejs中间件代理跨域 9.WebSocket协议跨域 详细过程链接:https://segmentfault.com/a/1190000011145364?utm_source=tag-newest

前端跨域访问

1. JSONP 2. CORS(Cross-origin resource sharing) 2.1 运行模式 2.2 JQuery支持CORS 2.3 与JSONP相比 3. 跨域访问在点评的应用 References 在互联网应用中: 一个页面需要请求多个域名下的web服务端接口 同时一个web服务接口可能会被很多不同域名下的页面请求. 一个web应用如果支持为了支持以上模式而申请多个域名是不合算的,因为域名申请和管理所占用的资源比较大,因此服务端支持跨域就成了一个更合理的解决方案.解决跨

前端跨域请求原理及实践

前端跨域请求原理及实践 2017-03-03 前端大全 (点击上方公众号,可快速关注) 作者:高鹏 tingandpeng.com/2016/09/05/前端跨域请求原理及实践/ 如有好文章投稿,请点击 → 这里了解详情 一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用.

前端跨域的那些事

这一节,我们来讲一讲,前端跨域的那些事,主要分成这样的几部分来讲解, 一.为什么要跨域? 二.常见的几种跨域与使用场景 2.1 JSONP跨域 2.2 iframe跨域 2.3 window.name 跨域 2.4 document.domain 跨域 2.5 cookie跨域 2.6 postMessage跨域 三.总结 一.为什么要跨域 跨域,通常情况下是说在两个不通过的域名下面无法进行正常的通信,或者说是无法获取其他域名下面的数据,这个主要的原因是,浏览器出于安全问题的考虑,采用了同源策略