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


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 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
微信小程序实现单选功能
Oct 30 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 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反转字符串函数strrev()函数的用法
2012/02/04 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
jquery索引在使用中的一些困惑
2013/10/24 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
Python实现Const详解
2015/01/27 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
利用python循环创建多个文件的方法
2018/10/25 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
刚毕业大学生自荐信范文
2014/02/20 职场文书
学员自我鉴定
2014/03/19 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
合同纠纷调解书
2015/05/20 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
女性励志书籍推荐
2019/08/19 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Java并发编程之Executor接口的使用
2021/06/21 Java/Android