前端跨域的几种解决方式总结(推荐)


Posted in Javascript onAugust 16, 2017

 搞大前端的,肯定都会遇到跨域问题的,虽然网上这方面的资料也很多,但我还是喜欢自己写一遍,自己理解过、总结过的东西才记得最深刻。

同源策略

JavaScript 的同源策略,是由Netscape提出的一个著名的安全策略,为了阻止A站的JS去操作别的网站的数据。你想啊,你现在打开了浏览器,在一个tab窗口中打开了银行网站,在另外一个tab窗口中打开了一个恶意网站,而那个恶意网站挂了一个的专门修改银行信息的JavaScript,当你访问这个恶意网站并且执行它JavaScript时,你的银行页面就会被这个JavaScript修改(比如说获取你的卡号和密码,又或者是转账到黑客的账户上等等),后果会非常严重!而同源策略就为了防止这种事情发生,它规定了A网站下的JS文件只能操作A网站下的数据,不能去操作B网站的数据。

为了方便理解,我们把这个词拆分成同源和策略这2个词吧(原谅我,我就怕你不理解啊)。

所谓同源指的就是指资源是来自同一个源的。如果两个页面拥有相同的协议,端口号,和主机(包括子域名和主域名),那么这两个页面就属于同一个源。

所谓策略指的是可以做什么事情。同一个源下的JS可以操作同一个源下的数据。

举个例子来看看你理解了没有吧,看下面这个链接,协议是http协议,主机是store.company.com,端口号一般默认的都是80了。然后和下面的这个表中的各个URL进行比较,判断一下哪些是同源的,哪些不是同源的。

URL 结果 原因
http://store.company.com/dir2/other.html 同源  
http://store.company.com/dir/inner/another.html 同源  
https://store.company.com/secure.html 非同源 协议不同
http://store.company.com:81/dir/etc.html 非同源 端口不同
http://news.company.com/dir/other.html 非同源 主机不同

什么是跨域

跨域

前端跨域的几种解决方式总结(推荐)

跨域的解决方案

方案1-JSONP

JSONP是JSON with padding的简写。JSONP由两部分组成:回调函数和数据。

回调函数是客户端和服务端约定好一个函数名,一般在请求中指定。

数据是传入回调函数中的JSON数据。

JSONP是通过动态的

callback({"name": "michael"});

问题一:JSONP是需要动态创建script标签的,我们需不需要处理这些script元素?怎么处理?

问题二:JSONP请求的时候,服务器发生错误该怎么办,比如服务器崩掉,比如返回了404页面,前端该怎么处理这个错误,难道直接让它抛出么?

答案

JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求

JSONP的兼容性好,不需要XMLHttpRequest的支持

方案2-跨域资源共享CORS

跨域资源共享定义了在必须访问跨域资源的时,浏览器与服务器应该如何沟通。他的原理是使用自定义的 HTTP 头部,让服务器与浏览器进行沟通,主要是通过设置响应头的 Access-Control-Allow-Origin 来达到目的的。

方案3-document.domain

浏览器的同源策略使得不同域的框架是不能进行JS的交互操作的。比如:有一个页面是http://www.examples.com/a.htmls,在这个页面中还有一个http://examples.com/b.htmls,很显然,a.html与b.html是不同域的,所以我们无法通过在页面中书写js代码来获取iframe中的东西,但是,如果我们把这2个页面的document.domain都设置成相同的域名就可以了,需要注意的是,我们只能把document.domain设置成自身或更高一级的父域,且主域名必须相同。

使用条件

document.domain适用于不同子域的框架之间的交互。

方案4-window.name

window对象有个name属性,该属性有一个特征:即在一个窗口的生命周期内,窗口载入的所有页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的。

方案5-window.postMessage

window.postMessage(message,targetOrigin)方法,可以用来向其他的window对象发送消息,无论这个window对象是属于同一个源还是不同源

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
JQuery开发的数独游戏代码
Oct 29 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
纯JS代码实现气泡效果
May 04 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 #Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 #Javascript
微信小程序自定义组件
Aug 16 #Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 #Javascript
微信小程序多列选择器range-key使用详解
Mar 30 #Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
微信小程序tabBar底部导航中文注解api详解
Aug 16 #Javascript
You might like
php模板之Phpbean的目录结构
2008/01/10 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
Android面试题附答案
2014/12/08 面试题
请解释流与文件有什么不同
2016/07/29 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
读书伴我成长演讲稿
2014/05/07 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
小学端午节活动总结
2015/02/11 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
python实现简单的聊天小程序
2021/07/07 Python