同源策略
概念:是浏览器的安全策略,如果两个URL的协议、域名、端口全部相同就是同源。
目的:同源策略的目的就是限制两个不同源之间的交互,保证用户信息安全,减少可能被攻击的媒介
同源策略的限制范围大概分为三部分:
1)Cookie、LocalStorage的读取
2)DOM的获取
3)AJAX请求的发送
跨域
由于浏览器同源策略的限制不允许跨域请求,如果当前URL的协议、域名、端口和请求的URL有一个不同就为跨域。
想要跨域访问有几种方式:
1)CORS
允许服务器通过Acess-Control-Allow-Origin设置有哪些域名可以访问资源(多个域名的话可以放在数组里,判断请求的域是否在数组包含的域中)
通常跨域请求分为简单请求和非简单请求。
简单请求,必须满足三个条件:
(1)请求方法为:get、post、head
(2)header中不能超过以下属性:Accept Accept-Language Content-Language Content-Type等等
(3)Content-Type中的值只能为:application/x-www-form-urlencoded或者text/plain或者multipart/form-data三者之一
非简单请求
首先需要通过OPTIONS发起一个预检请求,询问服务器是否允许实际的请求,请求头部携带Access-Control-Request-Method以及Access-Control-Request-Head表明实际请求的方法以及自定义的头部,如果服务器端允许的话,客户端才会发送实际的请求,对于附带凭证的请求,需要将XMLHttpRequest的withCredentials属性设置为true才可以,如果服务器端返回的头部中没有Access-Control-Allow-withCridentails:true,则不会返回结果
2)JSONP
通过创建script标签并提供一个回调函数接收服务器传回的数据的方式实现跨域访问,只支持get请求
3)PostMessage
是H5的API,无论是否同源,都可以通过window的PostMessage方法实现跨域通信,第一个参数发送的消息,第二个参数目的域名。这个方***触发目的页面中的message事件,目的页面通过箭头message事件收到数据。message事件对象有三个属性source发送消息的窗口,origin消息发送的网址,data消息内容
4)Document.domain
Document.domain允许两个父域相同的网页进行跨域交互,需要将两个页面的document.domain设置为相同的值
5)window.name
一般设置一个隐藏的iframe,监听它的第二次onload事件,这时iframe已经跳转到同域页面了,就可以使用contentWindow.name获取数据