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


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 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 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下判断网址是否有效的代码
2011/10/08 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python的文件操作方法汇总
2017/11/10 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
linux安装python修改默认python版本方法
2019/03/31 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
对python中list的五种查找方法说明
2020/07/13 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
网络方面基础面试题
2012/11/16 面试题
linux面试题参考答案(7)
2012/10/29 面试题
篮球赛口号
2014/06/18 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
写给医生的感谢信
2015/01/22 职场文书
司机个人年终总结
2015/03/03 职场文书
网络销售员岗位职责
2015/04/11 职场文书
学生病假条范文
2015/08/17 职场文书
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL