Jsonp跨域详解

了解跨域

http:// www. abc.com : 8080
协议 子域名 主域名 端口号 任意一个不相同时都算作不同域

所有跨域都必须经信息提供方允许, 如果未经允许即可获取, 那是浏览器同源策略出现漏洞

后台的方式
设置响应头 header（“Access-Contorl-Allow-Origin:*”）
或者通过CORS实现跨域

前端的方式
通过jsonp来实现

jsonp

默认就是get属性,因为它就是利用src属性进行操作的

实现原理
1.利用script的src天然跨域属性
2.发送一个请求去后台（通过函数带回函数）
3.用另外一个script标签通过函数接收
jquery中封装了所有事情的起始过程

$.ajax({
	type：'get'，
	url:'http://127.0.0.1:3000/add',
	dataType:'jsonp',
	success:function(res){
		console.log(res) //这里返回回来的数据
	}
})

原生的请求过程：
需要手动创建script标签,然后设置src属性，拼接地址和一个callback=函数名称
发起请求后，通过另外一个script标签中声明一个函数，名称与请求的函数的名称相同，然后以形参作为最终的数据
如果追究过程，那么要知道的是这里的请求不是由异步对象完成的而是由
jquery动态创建的script标签，并且设置了地址和随机生成的回调函数名称
数据成功返回之后，将会把这个标签销毁，数据将会在success函数中接收

客户端
步骤1.发起请求，配置了dataType为jsonp，由jQuery自动完成一个请求的发送
	  并创建一个随机的方法名称
步骤2.接收响应回来的数据，（随机的方法名称res）
步骤3 在客户端页面中创建对应的函数声明去接收那么就应该在当前这个函数内部完成后的功能
function 随机的方法名称（res）{
	//	这里就是最终接收到的数据
}

服务器端
步骤1：根据前端发起的get请求，获取到$callback（由jquery发起请求自动生成的随机名称）
步骤2.获取数据，读取数据$res
步骤3.返回一个方法的调用，但是是以字符串的方式

思考误区：既然script标签能解决跨域问题获取数据，那么为什么后端不直接给前端返回数据，而是调用函数？
script 标签确实能够解决跨域并且获取数据，但是前端没有办法接收返回的数据，所以就有人想到，如果返回的是一个调用，那么只需要在另外一对script标签中，声明一个同名的函数进行接收就行了，后续的处理也就是在这个函数内部进行，所以整个过程并没有异步对象的参与