跨域是由浏览器的同源策略引起的,是指页面请求的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是持久存在一个窗口载入过的所有页面中的。显然,这是可以实现跨域访问的。

总结

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

最新资讯
Facebook新专利曝光:收集更多信息 可知用户家庭成员

Facebook新专利曝光:

根据本周披露、Facebook 2017年申请的一件专利,除收集
各路对手出现 在华业绩承压:星巴克中国收紧会员制度

各路对手出现 在华业

中国市场上,星巴克也越来越没办法忽视各路对手,除了可能
双11背后技术驱动力:电商纷纷上"云" 促成庞大交易量

双11背后技术驱动力:

在消费者眼中,“双11”是购物狂欢节。但在工程师眼中,却
七成投票者认同网约车内为公共环境

七成投票者认同网约车

近期,“滴滴公众评议会”第二期着重于讨论此类关于车内
退货、返利、丢件?警惕“双11”后三类常见骗局

退货、返利、丢件?警惕

根据往年“双11”后网购类诈骗案件发案数、损失金额急
沃尔玛将超过苹果成美国第三大在线零售商

沃尔玛将超过苹果成美

根据eMarketer本周的一份报告,沃尔玛已超过苹果,成为美
最新文章
详解Web前端性能优化详解之资源合并与压缩

详解Web前端性能优化

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

element.style内联样

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

图文实操详解前端处理

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

深入理解::before/:be

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

利用.htaccess实现禁

这篇文章主要给大家介绍了关于利用.htaccess实现禁止
前端面试必备之同源和跨域详解

前端面试必备之同源和

跨域是由浏览器的同源策略引起的,是指页面请求的url地