跨域是由浏览器的同源策略引起的,是指页面请求的url地址,必须与浏览器上url地址处于同域上(即域名,端口,协议相同),下面这篇文章就来给大家介绍了关于前端面试必备之同源和跨域的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。

前言

众所周知浏览器的同源策略及跨域的方法在前端面试中也是出场率极高的问题,本文主要跟大家分享了关于前端面试时会遇到的同源和跨域问题,下面话不多说了,来一起看看详细的介绍吧。

什么是同源策略

同源策略是用来限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互,是一种用于隔离潜在的恶意文件的关键的安全机制。

何谓同源

如果协议、域名和端口对于两个页面来说是相同的,则这两个页面就是同源的。比如:http://www.hyuhan.com/index.html 这个网站,协议是http,域名是www.hyuhan.com,端口是80(默认端口),它的同源情况如下:

    http://www.hyuhan.com/other.html:同源http://hyuhan.com/other.html:不同源(域名不同)https://www.hyuhan.com/other.html:不同源(协议不同)http://www.hyuhan.com:81/other.html:不同源(端口不同)

同源策略是为了保护用户信息的安全,受到同源策略限制的主要有以下几种行为:

    Cookie、LocalStorage和IndexDB无法读取DOM无法操作AJAX请求不能发送

如何进行跨域访问

怎么跨域进行AJAX请求

主要由三种方法可以绕过同源策略的限制,来进行跨域的AJAX请求。

JSONP

JSONP是客户端与服务端跨域通信的常用的方法。利用可以跨域的

window.onload = function() {var script = document.createElement('script');script.src = "http://example.com/callback=test";document.appendChild(script);
}
function test(res) {console.log(res);
}

src的callback参数是用来设置后端需要调用的回调函数的名字的,服务器返回的数据如下:

test({"name": "小明","age": 24})

这样,前端就能跨域读取后端的数据了。但是jsopn只能发生get请求,不能发送post请求。

WebSocket

WebSocket是一种基于TCP的新的网络协议,它不实行同源策略,只要服务器支持,就可以进行跨域访问。而且WebSocket并不限于以Ajax方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互信息。

CORS

CORS是Access-Control-Allow-Origin(跨域资源共享)的缩写,它是一个W3C的标准。CORS需要浏览器和服务器同时支持,目前基本所有的浏览器都支持该功能。服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

document.domain

Cookie是服务器写入浏览器的信息,安全起见,只有同源的网页才能共享。但是,如果两个网页的一级域名相同,但是耳机域名不同的话,可以通过设置document.domain来共享Cookie。

比如,一个网页域名是http://w1.example.com/a.html ,另一个网页域名是http://w2.example.com/b.html ,只要给们设置相同的document.domain,这两个网页就可以共享Cookie。

postMessage API

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文档、多窗口、跨域消息传递。用postMessage()函数传递消息,目标页面监听window的message事件接收消息。利用postMessage,我们可以跨域读取LocalStorage和IndexDB还有DOM数据。

window.name

浏览器窗口有window.name的属性,该属性规定无论是否同源,只要在一个窗口里,前一个网页设置了这个属性,后一个网页就可以读取它。即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的。显然,这是可以实现跨域访问的。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对爱安网的支持。

最新资讯
BAT十年财报对比:AT争王、百度掉队

BAT十年财报对比:AT争

过去十年,没有任何一家企业,能撼动BAT三分天下的格局。
华为砸百亿建的东莞欧洲小镇,打卡攻略在此(组图)

华为砸百亿建的东莞欧

想要欧洲一日游?来华为松山湖基地。风景梦幻、设施豪华
腾讯程武:腾讯影业将发力三方向 讲好中国故事

腾讯程武:腾讯影业将发

3月24日下午消息,2019腾讯新文创生态大会在国家会议中
直击|单霁翔讲述故宫探索 保护文物要让文物活起来

直击|单霁翔讲述故宫

2019腾讯新文创生态大会在国家会议中心召开,故宫博物院
全通教育深陷亏损泥沼 吴晓波出(bu)售(mai)资产“一鱼多吃”

全通教育深陷亏损泥沼

李向磊 党鹏一边是曾经A股头名,一边是财经领域知名KOL(
中国5G:由NSA向SA过渡 运营商今年5G投资预算超300亿

中国5G:由NSA向SA过渡

三大运营商2019年5G投资预算超300亿元由NSA向SA过渡
最新文章
前端浏览器字体小于12px的解决办法

前端浏览器字体小于12

这篇文章主要给大家介绍了关于前端浏览器字体小于12px
详解Web前端性能优化详解之资源合并与压缩

详解Web前端性能优化

这篇文章主要介绍了详解Web前端性能优化详解之资源合
element.style内联样式的修改方法教程

element.style内联样

这篇文章主要给大家介绍了关于element.style内联样式
图文实操详解前端处理小图标的那些解决方案

图文实操详解前端处理

在前端日常开发中,小图标是必不可少的,我们该如何高效的
深入理解::before/:before和::after/:after的使用

深入理解::before/:be

之前在网上总是可以看到::before :before ::after :af
利用.htaccess实现禁止某个IP访问网站的方法

利用.htaccess实现禁

这篇文章主要给大家介绍了关于利用.htaccess实现禁止