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

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

前端常见跨域解决方案

简介: 什么是跨域? 跨域是指的一个域名下的文档或者脚本试图去请求另一个域名下的资源,这里跨域是广义的。 广义的跨域 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

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

相关文章
react-router实现权限控制小记
react-router在前端权限控制中的使用
13 0
一名优秀的程序员应该向谁提问
一名优秀的程序员应该向谁提问
3 0
阿里云配置解析
在学习配置ECS中的一些心得
9 0
Dubbo实战案例02【业务实现】
Dubbo实战案例02【业务实现】
3 0
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
4 0
技术大佬:我去,你竟然还不会用 this 关键字(2)
技术大佬:我去,你竟然还不会用 this 关键字
3 0
Dubbo实现案例03【案例部署】
Assembly 打包插件 assembly资料下载:https://download.csdn.net/download/qq_38526573/11072843
3 0
集群和分布式的区别是什么?
集群和分布式的区别是什么?
3 0
本地启动 SAP Commerce Cloud(Hybris) 产生的五个 Java 进程
本地启动 SAP Commerce Cloud(Hybris) 产生的五个 Java 进程
3 0
+关注
廊桥梦醉
对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。
69
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载