Axios、同源策略和跨域、JSONP

Axios基本概念

Axios 是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest 对象，axios 简单易用。
相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

axios的基本使用方式
发起get请求：

axios.get(请求地址,{params: 参数}).then(function (res) {});

发起post请求：

axios.post(请求地址,{data: 参数}).then(function (res) {});
axios.post(请求地址, 参数).then(function (res) {});

综合方法：

axios({
	method: 请求类型,
	url: 请求地址,
	params: get请求发送的数据,
	data: post请求发送的数据,
}).then(function (res){

});

注意：res不是服务器返回的原始数据，是axios加工之后的数据；res.data是服务器返回的数据；

同源策略、跨域

什么是同源：
如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。
MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

什么是跨域：
同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。
出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

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

实现跨域数据请求的方法：
现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。
JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
JSONP的实现原理：
由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是scr属性不受浏览器同源策略的影响，可以通过<script> 标签的src 属性，请求非同源的 js 脚本。
JSONP的使用过程：
1.通过script标签发出请求，浏览器会认为请求回来的数据是一个js文件，会当作js代码去执行；
2.script标签的src地址中，使用协商好的字段携带要调用的函数名；
3.服务器会根据请求地址中的字段，捕捉到函数名，把函数名和数据拼接后返回；
4.在前端页面中，定义传输的函数名，通过形参接收服务器传过来的实参；

JSONP的缺点
由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。
注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到XMLHttpRequest 这个对象。

用jQuery发出JSONP请求：

$.ajax({
	url: 请求地址, // 请求地址后面用?+字符串的格式发送数据
	dataType: 'JSONP',
	success: function(res){
		console.log(res);
	}
});

在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定：

 $.ajax({
 url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
 dataType: 'jsonp',
 
 // 发送到服务端的参数名称，默认值为 callback
 jsonp: 'callback',
 // 自定义的回调函数名称，默认值为 jQueryxxx 格式
 jsonpCallback: 'abc',
 
 success: function(res) {
 console.log(res)
 }
 });