同源策略
一、同源是什么?
如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源
二、同源策略是什么?
同源策略是浏览器提供的一个安全功能
浏览器规定,A网站的Javascript,不与许和非同源的网站C之间进行资源的交互
例如:
- 无法读取非同源网页的Cookie,LocalStorage和IndexedDB
- 无法接触非同源网页的DOM
- 无法向非同源地址发送Ajax请求
跨域
一、跨域是什么?
同源指的是两个URL的协议,域名,端口一致,反之则是跨域
二、出现跨域的根本原因是?
浏览器的同源策略不不允许非同源的URL之间进行资源的交互
三、浏览器对跨域请求的拦截
浏览器允许发起跨域请求,但是跨域请求回来的数据,会被浏览器拦截,无法被页面获取到
四、如何实现跨域数据请求
最主要的两种解决方案--------JSONP&CORS
JSONP:
1、JSONP是JSON的一种 “使用模式”,可以用于解决主流浏览器的跨域数据访问的问题
2、实现原理
由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据,但是<script>标签不受浏览器同源策略影响,可以通过scr属性请求非同源的js脚本,因此,JSONP的实现原理就是通过<script>标签的src属性,请求跨域的数据接口,并通过函数调用的形式接收跨域接口响应回来的数据
3、JSONP的优缺点:
- 优点:出现早,兼容性好(兼容低版本浏览器)
- 缺点:只支持GET请求,不支持POST请求
⚠️ JSONP和Ajax之间没有任何关系,不能把JSONP请求数据的方式叫做Ajax,因为JSONP没有用到XMLHttpRequest对象
4、jQuery中的JSONP
jQuery提供的$.ajax()函数,除了可以发起真正的Ajax数据请求之外,还能够发起JSONP数据请求
默认情况下,使用jQuery发起JSONP请求会自动携带一个callback=jQueryxxx的参数,jQueryxxx是随机生成的一个回调函数名称
5、jQuery中JSONP的实现过程
通过动态创建和移除<script>标签的方式发起JSONP
CORS:
- 优点:支持GET和POST请求
- 缺点:出现较晚,不兼容某些低版本的浏览器