资讯专栏INFORMATION COLUMN

总结跨域的几种方式

diabloneo / 1735人阅读

摘要:比如域的页面通过嵌入了一个域的页面,可以通过以下方法实现和的通信通过跨域以上几种都是双向通信的,即两个,页面与或是页面与页面之间的,下面说几种单项跨域的一般用来获取数据,因为通过标签引入的是不受同源策略的限制的。

跨域整理
@(前端笔记)

跨域

只要协议、域名、端口有任何一个不同,都被当作是不同的域。
由于浏览器的同源策略,其限制之一是不能通过ajax的方法情趣请求不同源的文档。第二个限制是浏览器中不同域的框架(iframe)间是不能进行js的交互操作的。

1、通过document.domain跨域

修改document.domain的方式只适用于不同子域的框架间的交互。

2、通过location.hash跨域

因为父窗口可以对iframe进行URL读写,iframe也可以读写父窗口的URL,URL有一部分被称为hash,就是#号及其后面的字符,它一般用于浏览器锚点定位,Server端并不关心这部分,应该说HTTP请求过程中不会携带hash,所以这部分的修改不会产生HTTP请求,但是会产生浏览器历史记录。此方法的原理就是改变URL的hash部分来进行双向通信。每个window通过改变其他 window的location来发送消息(由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于父窗口域名下的一个代理iframe),并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录,而且有些浏览器不支持onhashchange事件,需要轮询来获知URL的改变,最后,这样做也存在缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等。

3、 通过HTML5的postMessage方法跨域

高级浏览器Internet Explorer 8+, chrome,Firefox , Opera 和 Safari 都将支持这个功能。这个功能主要包括接受信息的"message"事件和发送消息的"postMessage"方法。比如damonare.cn域的A页面通过iframe嵌入了一个google.com域的B页面,可以通过以下方法实现A和B的通信

4、通过jsonp跨域
以上几种都是双向通信的,即两个iframe,页面与iframe或是页面与页面之间的,下面说几种单项跨域的(一般用来获取数据),因为通过script标签引入的js是不受同源策略的限制的。所以我们可以通过script标签引入一个js或者是一个其他后缀形式(如php,jsp等)的文件,此文件返回一个js函数的调用。

JSONP的优缺点

SONP的优点是
它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是

它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

5、通过CORS跨域
CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

CORS与JSONP的对比

JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。

使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS)。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90134.html

相关文章

  • javascript跨域几种方法

    摘要:在支持这个方式的浏览器里,的写法和不跨域的写法一模一样,只要服务器需要设置这种方式适用于主域相同,子域不同,比如和假如这两个域名下各有和在这里操作里的元素数据注意需要设置成自身或更高一级的父域,且主域必须相同。 打个招聘广告: 杭州 阿里巴巴B2B 招前端(想去西溪的也可帮推荐),比较缺人,机会多多!广告位长期有效,有兴趣简历我邮箱:854936875@qq.com 此文章学习借鉴了一...

    he_xd 评论0 收藏0
  • 什么是跨域以及几种简单解决方案

    摘要:什么是跨域要明白什么是跨域之前,首先要明白什么是同源策略同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。最后,解决跨域问题还有一个更通用更强大的方法,我单独把它拿出来总结了一篇文章跨域问题的根本解决方案。 什么是跨域? 要明白什么是跨域之前,首先要明白什么是同源策略? 同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同...

    zhaofeihao 评论0 收藏0
  • Web开发之跨域跨域资源共享

    摘要:例外当涉及到同源策略时,有两个主要的例外授信范围两个相互之间高度互信的域名,如公司域名,不遵守同源策略的限制。端口未将端口号加入到同源策略的组成部分之中,因此和属于同源并且不受任何限制。 原文链接:http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略(same origin policy) 1995年,同源政策由 Netscape 公司引入浏...

    Eastboat 评论0 收藏0
  • 关于跨域

    摘要:服务端接收到请求后,通过该参数获得回调函数名,并将数据放在参数中将其返回收到结果后因为是标签,所以浏览器会当做是脚本进行运行,从而达到跨域获取数据的目的。 在使用Vue搭建的一个后端管理系统中,我使用axios请求本地的Node环境下的接口,但是请求失败,然后我错误信息是:showImg(https://segmentfault.com/img/remote/1460000018521...

    AlexTuan 评论0 收藏0
  • 域的四种方式

    摘要:本文主要是关于跨域的几种方式,关于什么是跨域这里就不多说了,写这个也是为了记住一些知识点的。我自己用和的写过一些,但是没有在实际工作中用过,所以对这一块了解不深。 本文主要是关于跨域的几种方式,关于什么是跨域这里就不多说了,写这个也是为了记住一些知识点的。 一. jsonp jsonp的跨域方式很容易理解,页面的的每一个script标签浏览器都会发送get请求获取对应的文本资源,获取到...

    StonePanda 评论0 收藏0

发表评论

0条评论

diabloneo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<