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


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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
webpack常用构建优化策略小结
Nov 21 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插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Python 初始化多维数组代码
2008/09/06 Python
Python切片知识解析
2016/03/06 Python
利用python求相邻数的方法示例
2017/08/18 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python动态文本进度条的实例代码
2020/01/22 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
教师的实习鉴定
2013/12/15 职场文书
企业文化建设实施方案
2014/03/22 职场文书
学校标语大全
2014/06/19 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
丽江古城导游词
2015/02/03 职场文书
西安大雁塔导游词
2015/02/10 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python