同源与跨域

一. 同源策略

1.什么是同源

如果两个页面,协议,域名,端口都一致,则为同源

例如:

 2.什么是同源策略

同源策略（Same origin policy）是浏览器提供的一个安全功能

官方概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制.

通俗理解就是浏览器规定,A网站的JavaScript,不允许和非同源的网站B之间进行资源的交互.

例如:

① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

② 无法接触非同源网页的 DOM

③ 无法向非同源地址发送 Ajax 请求

二. 跨域

1.什么是跨域

同源指的是两个URL的协议,域名,端口一致,反之就是跨域.

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

浏览器对跨域的请求拦截:

注意:

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

2.如何实现跨域数据请求

现如今，实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS。

JSONP：出现的早，兼容性好,是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。

CORS：出现的较晚，它是W3C标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器.

3. JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP的实现原理:

由于同源策略的限制,网页中无法通过Ajax请求非同源的接口数据,但是<script>标签不受影响,可以通过src属性请求非同源的js脚本.

因此,JSONP的实现原理就是通过<script>标签的src属性,请求跨域的接口数据,并通过函数调用的形式,接受跨域接口响应回来的数据.

自己实现一个简单的JSONP

1.定义一个success回调函数:

<script>
function success(data){
 console.log('获取到了data数据：')
 console.log(data)

}
</script>

通过 <script> 标签，请求接口数据：

<script src="http://ajax.frontend.net:3006/api/jsonp?callback=success&name=zs&a
ge=20"></script>

JSONP的缺点:

由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。

另外:JSONP和Ajax之间没有任何关系,因为JSONP没有用到XMLHttpRequest这个对象.