同源策略 & 跨域
同源
同源：指的是两个 URL 地址具有相同的协议、主机名、端口号
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。
浏览器的同源策略规定：ajax请求的接口地址 与 ajax所在的静态html文件地址 要遵循同源策略
跨域
概念
同源指的是两个 URL 的协议、主机名、端口号完全一致，反之，则是跨域
出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
-
受到同源策略的限制，上面的网页请求下面的接口会失败！
浏览器允许发起跨域请求。但跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！
突破浏览器跨域限制的三种方案
JSONP , CORS 与 反向代理 是实现跨域数据请求的三种技术方案。
注意：目前 JSONP 在实际开发中很少会用到，
CORS 与反向代理是现在跨域的主流技术解决方案。
CORS 的概念
CORS 是解决跨域数据请求的一种解决方案，全称是 Cross-origin resource sharing。
CORS 技术需要浏览器和服务器同时支持，二者缺一不可：
① 浏览器要支持 CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10）
② 服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）
CORS 的原理
服务器端通过 Access-Control-Allow-Origin 响应头，来告诉浏览器当前的 API 接口是否允许跨域请求。
CORS 的两个主要优势
① CORS 是真正的 Ajax 请求，支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式
② 只需要后端开启 CORS 功能即可，前端的代码无须做任何改动
反向代理
原理: ajax跨域去第三方接口请求数据是拿不到的,因要遵循同源策略. 但是去自己的服务器要数据是不是就遵循同源策
略了.再让自己的服务器去第三方的接口服务器取数据.最后再返回给ajax
JSONP
JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求，不支持 POST、DELETE 等其它请求
JSONP 的底层实现原理:
JSONP 在底层，用到了 <script> 标签的 src 属性！
<script> 标签的 src 属性，不受浏览器同源策略的限制,可以把非同源的 JavaScript 代码请求到本地，并执行
1.把非同源的 JavaScript 代码请求到本地，并执行：
<script src="http://www.xxx.com/xxx.js"></script>
<script src="http://www.liulongbin.top:3009/api/getscript2"></script>
script的src属性值可以获取网络上任意的资源
2.如果请求回来的 JavaScript 代码只包含函数的调用，则需要程序员手动定义 show 方法。
function showInfo(data) { console.log(data) }
3.在指定<script>标签的 src 属性时，可以通过查询参数中的 callback，自定义回调函数的名称：
<script src="http://www.liulongbin.top:3009/api/jsonp?callback=showInfo"></script>
缺点：服务器响应回来的代码中，调用的函数名是写死的
4.在指定 <script> 标签的 src 属性时，还可以通过查询参数的方式，指定要发送给服务器的数据：
<script src="http://www.liulongbin.top:3009/api/jsonp?callback=showInfo&name=zs&age=20"></script>
JSONP 不是真正的 Ajax 技术
在解决跨域问题时：
-
CORS 方案用到了 XMLHttpRequest 对象，发起的是纯正的 Ajax 请求
-
JSONP 方案没有用到 XMLHttpRequest 对象，因此，JSONP 不是真正的 Ajax 技术
只要用到了 XMLHttpRequest 对象，发起的就是 Ajax 请求！
