搞大前端的,肯定都会遇到跨域问题的,虽然网上这方面的资料也很多,但我还是喜欢自己写一遍,自己理解过、总结过的东西才记得最深刻。
同源策略
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对象是属于同一个源还是不同源
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对的支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]