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

Web前端常见跨域解决方案

作者:韩湘子的csdn 时间: 2021-02-05 09:43:17
韩湘子的csdn 2021-02-05 09:43:17
【摘要】一、通过Jsonp跨域 
二、document.domain+iframe 跨域 
三、location.hash+iframe 跨域 
四、window.name+iframe 跨域 
五、postMessage 跨域 
六、跨域共享资源 (CORS) 
七、nginx 代理跨域 
八、node js中间件代理跨域 
九、WebSocket 协议跨域 
1、通过Jsonp跨域: 
    ...

 

一、通过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占位
分享文章到微博
分享文章到朋友圈

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

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

您可能感兴趣

  • 如何在Web页上实现文件上传

    public class UploadServlet extends HttpServlet{  //default maximum allowable file size is 100k  static final int MAX_SIZE = 102400;  //instance variables to store root and success message  String r...

  • 利用 Web 对象通道使 Java 对象穿越防火墙

    摘要如果在 Web 服务器和 Applet 小程序(或任何 Java Web 客户端程序)之间创建一条 HTTP 对象通道,那将十分有用。这样,动态数据就可以通过防火墙以串行方式直接发送到 Web 客户端。这些数据可以是服务器端 JavaBean 实例、ORB 对象引用、移动代理等--对此,不存在任何限制!那么,RMI (远程方法调用)又如何呢?如果您使用 JDK 1.1.x 中的标准 RM...

  • JDK1.2关于JDBC中文问题的解决方案

    忙了几天,终于对JDK1.2的JDBC中文问题有了初步的了解,虽然还有问题存在,但我想大家可能都着急了吧?:)所以就把我的初步想法先贴出来,欢迎大家补充. JDK1.2的中文问题主要是由于引入了Unicode引起的(其实在1.1版本中就有了),Unicode的字符由16bit构成,关于Unicode更详细的信息有兴趣者可以到www.unicode.org查阅,在1.0版本中,一个中文是由两个...

  • 用XMLHTTP Post/Get HTML页面时的中文乱码问题之完全Script解决方案

    用XMLHTTP Post/Get HTML页面时的中文乱码问题之完全Script解决方案 关键词:VBScript, ASP, JavaScript, Java, XML 以前我曾经贴过一篇用XMLHTTP Post Form 的帖子,那里的代码中我Post E文的Value毫无问题,但是后来发现Post含有中文的表单时会出现乱码,原因当然是UTF-8 和GB2312 之间的转换问题了!T...

  • Delpi在MDI窗口中显示图形控件及指定背景的解决方案

    在使用MDI介面时,有时候需要在MDI客户窗口中显示一些图形或软件封面,使得软件介面不会显得空旷,软件功能也能一目了然。然而在Delphi中并没有直接给出这些接口。在MDI窗体中放入任何图形控件在运行时都不能显示。因此需要对MDI窗体进行改造。申明:    本方案仅针对MDI窗体,如果应用在非MDI窗体中,后果难说,你自已试试吧。    记住,窗体的FormStyle属性要设置为:fsMDI...

  • 如何進入程式設計的領域 蔡學鏞

    這一陣子,軟體、網路大紅,許多人對程式設計開始感興趣,我收到好一些Sleepless in Java專欄讀者的來信,不少讀者共同的問題是:如何進入程式設計的領域?所以我選這個主題當作Sleepless in Java專欄「復刊」的第一篇文章。 寫程式是很有趣的事,可以把自己的想法付諸實行。寫程式的工具很簡單,只要有一部PC,適當的開發環境,就可以上工了。這樣有限的工具卻可以創造無限的可能,這...

  • 用Java在Web页面上输出统计图 统计报表

    用Java在Web页面上输出统计图 河南省焦作水利局 聂春生   在Internet 和Intranet 的应用中,数据库和Web 技术的结合是传统MIS 系统移植到Internet(Intrant) 环境的关键, 已有不少厂商推出了各自的产品,但这些产品基本上是实现数据的html 格式输出。在实际应用中,我们经常需要把数据以统计图的形式表现出来,例如股票行情曲线图的输出。传统的方法是把统计...

  • 利用Servlet开发企业级三层Web应用(二) 实现中间层

    利用Servlet开发企业级三层Web应用(二) 黄微、申刚玉   3.实现中间层  下面以BookServlet为例,说明如何实现中间层的Servlet。  (1)初始化Servlet   public class BookServlet extends HttpServlet {   protected Connection dbConnection;   protected Prepa...

CSDN

CSDN

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

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

免费套餐,马上领取!
Web前端常见跨域解决方案介绍:华为云为您免费提供Web前端常见跨域解决方案在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多Web前端常见跨域解决方案的相关内容。| 移动地址: Web前端常见跨域解决方案 | 写博客