精选文章 Web前端常见跨域解决方案

Web前端常见跨域解决方案

作者:韩湘子的csdn 时间: 2020-08-05 04:19:43
韩湘子的csdn 2020-08-05 04:19:43

 

一、通过Jsonp跨域

二、document.domain+iframe 跨域

三、location.hash+iframe 跨域

四、window.name+iframe 跨域

五、postMessage 跨域

六、跨域共享资源 (CORS)

七、nginx 代理跨域

八、node js中间件代理跨域

九、WebSocket 协议跨域

1、通过Jsonp跨域:

    通常为了减轻Web服务器的负载,我们把Js、Css、img等静态资源分离

    到另一台独立域名的服务器上,在html页面中在通过相应的标签从不同

    的域名下加载静态资源,而被浏览器运行,基于此原理,我们可以通过

    动态创建script标签,再请求一个带参网址实现跨域通信,是目前比较

    常见的跨域方式。

    缺点:只能实现get一种请求。

2、document.domain+iframe跨域:

    此方案仅限主域相同,子域不同的跨域应用场景。

    实现原理:

    两个页面都通过Js强制设置document.domain为基础主域,

    就实现了同域。

3、location.hash+iframe跨域:

    实现原理:A欲与B跨域相互通讯,通过中间页C来实现。三个页面,不

    同域名之间利用iframe的location.hash传值,相同域名之间直接Js访问来通信。

    具体实现:A域:a.html——>B域:b.html——>A域:c.htmla与b不同域只能通过hash值单向通信,但c与a同域,所以c可通过parent.parent访问a页面所有对象。

4、window.name+iframe跨域:

    window.name属性的独特之处:

    name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以

    支持非常长的name值(2MB)

    总结:

    通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的

    跨域访问限制,但同时它又是安全操作。

5、postMessage跨域

    postMessage是HTML5 XMLHttpRequest Level 2中的Api,

    且是为数不多可以跨域操作的window属性之一,它可用与解决以下

    方面的问题:1、页面和其打开的新窗口的数据传递2、多窗口之间消息传递3、页面之嵌套的iframe消息传递4、上面三个场景的跨域数据传递

    用法:

    postMessage(data,origin)方法接收两个参数

    data:html5规范支持任意基本类型或可复制的对象,但部分浏览器

    支持字符串,所以传参时最好用JSON.stringfiy()序列化。

    origin:协议+主机+端口号,也可以设置为"*",表示可以传递给任意

    窗口,如果要制定和当前窗口同源的话设置为"/"。

6、跨域资源共享(CORS)

    普通跨域请求:

    只服务端设置Access-Control-Allow-Origin即可,前端无需设置,

    若要带cookie请求,前后端都需要设置。

    需注意的是:

    由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,

    而非当前页。如果想实现当前页cookie的写入,可参考下文 7、nginx反

    向代理中设置proxy_cookiedomain和 8、Nodejs中间件代理中cookieDo

    mainRewrite参数的设置。

    目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest

    对象来支持CORS),CORS也已经成为主流的跨域解决方案。

7、nginx代理跨域

    nginx配置解决iconfont跨域:

    浏览器跨域范文Js、Css、Img等常规静态资源被同源策略许可,单iconfont

    字体文件(eot/otf/ttf/woff/svg)例外,此时可在nginx的静态资源服务

    器中加入配置。

8、Nodejs中间件代理跨域

    node中间件实现跨域代理,原理大致与nginx相同,都是通过一个代理服务器

    ,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中

    cookie中域名,实现当前域的cookie写入,方便接口登陆认证。

9、WebSocket协议跨域

    WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双

    工通信,同时允许跨域通讯,是server push技术的一种很好的实现。

    原生WebSocket Api使用起来不太方便,我们使用Socket.io,她很好地封装

    了WebSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器。

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:C# 对象类型集合自定义排序

下一篇:FFmpeg命令行实现两路/多路视频拼接 合并 合成 同时播放

您可能感兴趣

  • 前端实习生面试题分析(一)

    最近面试拿了很多公司的实习offer,只要是面试的都通过了。 接下来就分析下面试题,也能给自己一个提升吧,以便后续的面试更轻车熟路些,题目没什么顺序,想起什么写什么,还有我面试过程中的一些小套路。 估计要写好多,每天写几道题,而且有些经验性的东西也不容易写出来 这篇写的都是类似一些概念性的理论东西。 1.JS防抖和节流 先说为什么要做防抖和节流,针对一些会频繁触发的事件,像scroll、re...

  • 爱了,3174页实战pdf集锦:Redis+多线程+Dubbo+JVM+kafka+MySQL

    写在前面 作为一名Java开发者,在现在这个信息化时代很快的时代,很少会有人停下脚步去思考以及去总结,忽略了很重要的一个步骤,没有反思和总结,只会用原来固有的想法去做事情,所以还是需要隔一段时间去总结。LZ今天总结了自己在平时会用到的一些: 01—Redis实战 在Redis诞生数年之后的今天,这个项目已经发生了显著的变化:我们现在拥有了一个更为健壮的系统,并且随着Redis 2.6的发布,...

  • Web端即时通讯实践干货:如何让WebSocket断网重连更快速?

    本文作者网易智慧企业web前端开发工程师马莹莹。为了提升内容质量,收录时有修订和改动。 1、引言 在一个完善的即时通讯IM应用中,WebSocket是极其关键的一环,它为基于Web的即时通讯应用提供了一种全双工的通信机制。但为了提升IM等实际应用场景下的消息即时性和可靠性,我们需要克服WebSocket及其底层依赖的TCP连接对于复杂网络情况下的不稳定性,即时通讯的开发者们通常都需要为其设计...

  • 我是如何失去团队掌控的?一个技术总监的反思

    我是一个不合格的技术总监,在过去的快三个月里。我带着从40多个人的研发团队(包含需求、开发、测试)里抽调出20多个人去为公司开疆拓土。在这快三个月中,我们一起奋战奋斗拼搏。在过程中,我通宵时间超过半个月,干到凌晨4/5点的日子数不胜数,干到凌晨1/2点日子更是习以为常。整个团队绝大多数人近乎两个月没有周末,辛苦异常,是实实在在的高峰体验。但是三个月后,我带着失败和一身的惨痛教训回到公司。 我...

  • C语言最新面试题系列之c语言底层操作问题

    概述   C语言的内存模型基本上对应了现在von Neumann(冯·诺伊曼)计算机的实际存储模型,很好的达到了对机器的映射,这是C/C++适合做底层开发的主要原因,另外,C语言适合做底层开发还有另外一个原因,那就是C语言对底层操作做了很多的的支持,提供了很多比较底层的功能。   下面结合问题分别进行阐述。   1、问题:移位操作   在运用移位操作符时,有两个问题必须要清楚:   (1)、...

  • 新基建呼唤新底座,华为下一代数据中心为何“底”气十足

    今年以来,“新基建”按下“加速键”,不少同“新基建”相关的行业展现出良好的发展前景。在新旧动能转换的关键时刻,“新基建”成为打造中国经济新增长的关键引擎。长远来看,新基建作为数字经济的骨干网络,肩负着支撑起整个数字经济运转的重任。 作为新基建七大领域之一,数据中心与5G、新能源、人工智能、工业互联网等有着天然紧密联系,承担着数字流的接收、处理、转发与存储重任,乃名副其实的新基建底座,关系着整...

  • 优傲机器人探讨在经济不明朗的时期如何保持业务连续性

    作者:优傲机器人产品和应用管理副总裁Jim Lawton 要想在竞争激烈的制造业中生存下来,就必须能够适应不断变化的客户需求和日新月异的全球经济走势。现在制造业正面临着巨大的挑战,全球仍有城市处在强制性关闭工厂和地域性封锁的时期,制造商不得不停止运作。当然,有一些制造商逆势而上,部署或加强自动化流程,以保持业务连续性。 传统自动化成本高昂且缺乏灵活性,需要数月甚至数年的时间来设计、开发和部署...

  • Linux系统内存

    Linux 内存是后台开发人员,需要深入了解的计算机资源。合理的使用内存,有助于提升机器的性能和稳定性。本文主要介绍Linux 内存组织结构和页面布局,内存碎片产生原因和优化算法,Linux 内核几种内存管理的方法,内存使用场景以及内存使用的那些坑。 从内存的原理和结构,到内存的算法优化,再到使用场景,去探寻内存管理的机制和奥秘。 一、走进Linux 内存 1、内存是什么? 1)内存又称主存...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。