前端常见跨域解决方案-阿里云开发者社区

开发者社区> 廊桥梦醉> 正文

前端常见跨域解决方案

简介: 什么是跨域? 跨域是指的一个域名下的文档或者脚本试图去请求另一个域名下的资源,这里跨域是广义的。 广义的跨域 1)资源跳转:A链接、重定向、表单提交 2)资源嵌入: 、 、 、等dom标签,还有样式中background:url()、@font-face()等文件外链 3)脚本请求:js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由于浏览器的同源策略限制的一类请求场景。
+关注继续查看

什么是跨域?

跨域是指的一个域名下的文档或者脚本试图去请求另一个域名下的资源,这里跨域是广义的。

广义的跨域

1)资源跳转:A链接、重定向、表单提交

2)资源嵌入:<link> 、<script> 、<img> 、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链

3)脚本请求:js发起的ajax请求、dom和js对象的跨域操作等

其实我们通常所说的跨域是狭义的,是由于浏览器的同源策略限制的一类请求场景。

什么是同源策略?

同源策略/SOP(same origin policy)是一种约定,由netsscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指“协议+域名+端口号”三者相同,即便两个不同的域名指向同一个IP地址,也非同源。

同源策略限制以下几种行为:

1)cookie、localStorage 和 indexDB无法读取

2)DOM和JS对象无法获取

3)AJAX请求不能发送

常见的跨域场景

img_dcd284e6ed9bbc6980863ce3523bcf43.png

跨域解决方案

1、通过jsonp跨域

2、document.domain + iframe跨域

3、location.hash + iframe

4、window.name + iframe跨域

5、postMessage跨域

6、跨域资源共享(cors)

7、nginx代理跨域

8、nodejs中间件代理跨域

9、webSocket协议跨域

一、通过jsonp跨域

通常为了减轻web服务器负载,我们把js、css、img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同的域名下加载静态资源,而被浏览器允许,基于此原理,我们可以通过动态创建script,再请求一个带参网址实现跨域通信。

1、)原生实现:

img_ccb1c8488b7848a404f0eb63ce57c40f.png

服务端返回如下(返回时执行全局函数)

img_3b524deeece50c75166b75ca58c306e7.png

2、)jquery ajax:

$.ajax({
        url:'http://www.domain2.com:8080/login',

        type:'get',

        dataType:'jsonp',//请求方式为

        jsonpCallback:'onBack',//自定义回调函数

        data:{}

})

3、)vue.js

img_08831c63742bce885380daf158cf0a91.png

后端node.js代码示例:

img_a5dcb9c7c9f3e34fa8a3cd9a8233d9b5.png

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

二、document.domain+iframe跨域

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

实现原理:两个页面都通过js强制设置document。domain为基础域,就实现了同域。

1、)父窗口:(http://www.domain.com/a.html)

img_2f0f79020dc51202896ae258607b86b1.png

子窗口:(http://child.domain.com/b.html)

img_61ed1ab414cb63544f49df974802b824.png

三、location.hash+iframe跨域

实现原理: a欲与b跨域相互通信,通过中间页c来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。

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

1.)a.html:(http://www.domain1.com/a.html)

img_84b8fb649e72223049157be3c6f365f1.png

2.)b.html:(http://www.domain2.com/b.html)

img_dbe422bcb8c0ddfa9f4a1581025fb8bc.png

3.)c.html:(http://www.domain1.com/c.html)

img_d144d2ffedbdfd3a29f5a29b62e20f9d.png

四、window.name + iframe跨域

window.name属性的独特之处:name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

1.)a.html:(http://www.domain1.com/a.html)

img_c4e4a73b1e6ddf1f287fb412d3b71732.png

2.)proxy.html:(http://www.domain1.com/proxy....

中间代理页,与a.html同域,内容为空即可。

3.)b.html:(http://www.domain2.com/b.html)

img_88e53aa009f4e2e11dffc68cf3859daf.png

总结:通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

五、 postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:

a.) 页面和其打开的新窗口的数据传递

b.) 多窗口之间消息传递

c.) 页面与嵌套的iframe消息传递

d.) 上面三个场景的跨域数据传递

用法:postMessage(data,origin)方法接受两个参数

data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。

origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

1.)a.html:(http://www.domain1.com/a.html)

img_8beb0a2f7d7f95c4571a4b620ee8741f.png

2.)b.html:(http://www.domain2.com/b.html)

img_c66e0b50ef8efd57ddbfe379be033d91.png

六、 跨域资源共享(CORS)

普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。

需注意的是:由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,而非当前页。如果想实现当前页cookie的写入,可参考下文:七、nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)),CORS也已经成为主流的跨域解决方案。

1、 前端设置:

1.)原生ajax

img_9a5fe4c1409ee748e0f9179c39fe4e38.png

示例代码:

img_3ac3bb22251684520d883040e1418396.png

2.)jQuery ajax

img_20ec09670ba93de299e93547ae11a2f3.png

3.)vue框架

在vue-resource封装的ajax组件中加入以下代码:

img_02f90c12a62957958543753b0632f17c.png

2、 服务端设置:

若后端设置成功,前端浏览器控制台则不会出现跨域报错信息,反之,说明没设成功。

1.)Java后台:

img_2c60634cf3c1b065b461d82f8518082f.png

2.)Nodejs后台示例:

img_49299050c48d70706a115e31568d9995.png

七、 nginx代理跨域

1、 nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。

img_6c4b90666eb1faf3fb21228777890365.png

2、 nginx反向代理接口跨域

跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。

实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。

nginx具体配置:

img_c8ebe9437601ff5cb386997b3a519380.png

1、)前端代码示例

img_03ad3b07d5d99a34d983e208a0920aa6.png

2.) Nodejs后台示例:

img_ed9c515ea8adcd2c5603346138c27fbd.png

八、 Nodejs中间件代理跨域

node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。

1、 非vue框架的跨域(2次跨域)

利用node + express + http-proxy-middleware搭建一个proxy服务器。

1.)前端代码示例:

img_4f10372625ff7f91f9b71d61cd6ad2b4.png

2.)中间件服务器:

img_8565190597382dadef78064f6cef6fcb.png

3.)Nodejs后台同(六:nginx)

2、 vue框架的跨域(1次跨域)

利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下,由于vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域,无须设置headers跨域信息了。

webpack.config.js部分配置:

img_c69a5c92f82e01e8186c986b232512da.png

九、 WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。

原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。

1.)前端代码:

img_3a7c7e8361a8fadd5f6ea0b8c65bfe8e.png

2.)Nodejs socket后台:

img_e5bdafcc3a1ebc9a31ba58c28ccac2ef.png

参考文档:https://segmentfault.com/a/1190000011145364

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
存储引擎常见batchwrite写优化
# 引言 做有竞争力的存储系统迟早会遇到需要性能瓶颈,本文简单记录一些batchwrite常见朴素优化思想,以防哪天我们需要完成这方面的工作,可以翻出来看看,借鉴一下人家的思想 本文不做代码层面探讨,可自行阅读链接中给出的代码。
422 0
前端异常监控解决方案研究
摘要: 异常监控不复杂也不简单啊... 原文:前端异常监控解决方案研究 作者:frustigor 前端监控包括行为监控、异常监控、性能监控等,本文主要讨论异常监控。对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如果出现异常,有可能是前端引起,也有可能是后端引起,需要有一个机制,将前后端串联起来,使监控本身统一于监控系统。
1838 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10355 0
前端常见bug系列2::last-of-type 和 :first-of-type的误用
[上一篇](http://www.atatech.org/articles/64244)中曾提到,someselecttor:last-chid 所表示的并不是someselecttor选中的节点集合的最后一个。那么,怎么达到这个效果呢?对,可以用:last-of-type。来个例子试试看吧! ``` .section{ margin-bot
4146 0
常见的QGraphicsItem
简述 QGraphicsItem 类是 QGraphicsScene 中所有 item 的基类。 它提供了一个轻量级的基础,用于编写自定义 item。其中包括:定义 item 的几何形状、碰撞检测、绘制实现、以及通过其事件处理程序进行 item 的交互,QGraphicsItem 是 Qt之图形视图框架 的一部分。 简述 常见的 QGraphicsItem QG
1661 0
阿里云推出全球应用加速解决方案,快速提升跨域应用访问体验
近日,阿里云全球加速产品推出全球应用加速等多个新特性,融合云安全DDoS高防与WAF的安全防护能力,结合云解析智能DNS与GTM全局流量调度,保障企业全球应用部署的高质量、高安全、高可靠。另外邀请到在线互联网教育机构—豌豆思维,进一步分享了他们使用全球加速的经验。
567 0
Ionic 1 & 2 开发常见问题 Q&A
原文发表于我的技术博客 本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考。原文发表于我的技术博客 1. 版本的问题 Ionic 2 目前属于快速迭代更新的版本,版本的更新会带来如文件结构和少许代码的变更,不过底层还是构建于 Angular 2 ...
1273 0
MySQL MHA配置常见问题
    MHA在MySQL数据库中被广泛使用,它小巧易用,功能强大,实现了基于MySQL replication架构的自手动主从故障转移,从库重定向到主库并自动同步。
1252 0
关于my.getAuthUserInfo报错:error4,无权跨域调用 的解决方案
使用my.getAuthUserInfo之前,是需要先使用my.getAuthCode的,两个API可以嵌套使用: my.getAuthCode({ scopes: 'auth_user', success: (res) => { my.
1653 0
+关注
廊桥梦醉
对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。
89
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载