同源策略&跨域

同源策略

一、同源是什么？

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源

二、同源策略是什么？

同源策略是浏览器提供的一个安全功能

浏览器规定，A网站的Javascript，不与许和非同源的网站C之间进行资源的交互

例如：

• 无法读取非同源网页的Cookie，LocalStorage和IndexedDB
• 无法接触非同源网页的DOM
• 无法向非同源地址发送Ajax请求

跨域

一、跨域是什么？

同源指的是两个URL的协议，域名，端口一致，反之则是跨域

二、出现跨域的根本原因是？

浏览器的同源策略不不允许非同源的URL之间进行资源的交互

三、浏览器对跨域请求的拦截

浏览器允许发起跨域请求，但是跨域请求回来的数据，会被浏览器拦截，无法被页面获取到

四、如何实现跨域数据请求

最主要的两种解决方案--------JSONP&CORS

JSONP：

1、JSONP是JSON的一种 “使用模式”，可以用于解决主流浏览器的跨域数据访问的问题

２、实现原理

由于浏览器同源策略的限制，网页中无法通过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请求
• 缺点：出现较晚，不兼容某些低版本的浏览器