前端处理跨域的几种方式及原理

原创 小枝节KKW 随笔 JS 1440阅读 2017-05-23 20:07:18 举报

作为一个前端工作者,跨域问题应该是很常见的,处理方式有很多,下边来说一说我用到过的处理方式。
1.什么是跨域

2.跨域的情况

3.跨域的方法
color=#00b050 jsonp跨域[/color]
原理:创建<script>标签,利用src属性跨域(src属性可以跨域),同样<img>也可以处理跨域
举个栗子:
test.html -----> http://a.haha.com/test.html
ajaxData -----> http://b.haha.com/list
test.html访问ajaxData需要跨域
javascript 代码

服务端的代码
php代码

局限性:<1> 需要服务端配合做处理
<2> jsonp只支持“get”请求,不支持“post”请求
color=#00b050 document.domain来跨越子域[/color]
原理:设置相同的主域
举个栗子:
有一个页面,它的地址是 http://a.haha.com/test.html , 在这个页面里面有一个iframe,它的src是 http://b.haha.com/test.html , 很显然,这个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的
html 代码

注意: <1> document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。
<2> 修改document.domain的方法只适用于不同子域的框架间的交互,对ajax访问的不适用。
color=#00b050 隐藏iframe做代理跨域[/color]

原理:让这个隐藏的iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面,所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的,然后就是通过修改document.domain的方法,让我们能通过js完全控制这个iframe,这样我们就可以让iframe去发送ajax请求,然后收到的数据我们也可以获得了。

html 代码

在梳理一下第3种
<1> test.html中设置一个隐藏的iframe,其src为http://b.haha.com/ajaxProxy.html,与ajaxData处于相同域,在iframe中访问ajaxData获取返回的数据
<2> 再利用第二种方法去获取iframe中的数据进行处理

color=#00b050CORS(跨域资源共享)跨域[/color]
基本思想:使用自定义的HTTP头部让浏览器和服务器进行沟通,从而决定请求或响应的成功还是失败
实现关键:服务器实现CORS接口,设置Access-Control-Allow-Origin
基本流程:
1.浏览器发送跨域ajax请求,会自动在头部信息中添加一个“Origin”字段,用来说明本次请求来自哪个源,服务器根据这个值确定是否同意这次请求。
Origin:http://b.haha.com
2.服务器发现origin指定的域名在许可的范围内,服务器返回的响应头内会添加一个Access-Control-Allow-Origin 表示接受该域名的请求。
Access-Control-Allow-Origin:http://b.haha.com
更多的了解可以参考阮老师的文章 跨域资源共享 CORS 详解

除此之外,跨域方式还有,欢迎补充~

评论 ( 5 )
最新评论
小枝节KKW 4F 2017-05-31 10:35:52 5F

不客气,多谢支持~

18830159776 2017-05-29 09:52:19 4F

以前对于闭包、跨域比较模糊,看完此篇文章后觉得对跨域有了个较为清晰的认识,谢谢楼主分享

13804061463 2017-05-28 18:12:12 3F

提升了一下自己

小枝节KKW 1F 2017-05-24 10:13:40 2F

谢谢支持!

悲凉秋风夜 2017-05-23 20:53:19 1F

给个赞,再收藏------确实不错,值得信赖。