简单讲解JSONP的跨域原理
同源策略：协议、域名、端口三者相同，则是同源。同源策略是浏览器的一种保护机制，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。
正是由于同源策略的存在，所以出现了很多跨域方案，JSONP同样可以解决跨域问题。
我们先来体验使用script标签实现简单跨域：
1.JSONP跨域原理
1.在VScode中创建一个html文件
client.htnl:（模拟客户端）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>客户端</title>
</head>
<body>
<div>客户端使用JSONP跨域</div>
<script src="http://127.0.0.1:5501/request.js" type="text/javascript"></script>
</body>
</html>
注意：在body中的script引入的是非同源下的request.js文件，而request.js是模拟远程服务器上的文件。
2.打开VScode的新窗口创建一个服务器
新建一个server文件夹，里面放有server.html和request.js
具体内容：
server.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务端</title>
</head>
<body>
</body>
</html>
这个文件不需要放入任何内容，我们利用VScode运行一个HTML文件会新建一个内置的端口号不同的本地服务器。从而模拟非同源,非同源就需要跨域才能请求到服务器数据。
request.js:
(function request(){
alert("我是来自服务端的JS");
})();
文件中是一个立即执行函数，当客户端能请求到request.js，则会执行这个函数。
现在运行两个html文件：
客户端：
服务端：
客户端端口为5500,而服务端端口5501，非同源下，客户端跨域获得了服务器的request.js文件。
总结： < script > 标签的src属性并不被同源策略所约束，所以可以通过该特性实现跨域获取任何服务器的js脚本并执行。
2.JSONP常见的callback模式
简单修改一下上面的代码：
client.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>客户端</title>
</head>
<body>
<div>客户端使用JSONP跨域</div>
<script>
function getData(data){
alert(data.message+data.count);
}
</script>
<script src="http://127.0.0.1:5501/request.js" type="text/javascript"></script>
</body>
</html>
request.js:
(function request(){
getData({message:"我来自服务端",count:110});
})();
上面展示的就是简单的callback模式：在客户端创建一个用于回调的函数(比如：getData())，然后在远程服务器上调用这个函数并且将json格式的数据作为参数，完成回调，从而实现了前后端跨域交互数据。
上面就是JSONP的callback模式的原理，我们常见的用jsonp实现跨域是这样的api：https:www.xxx.com/yyy?id=123&callback=?
那我们在客户端就可以这样定义：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>客户端</title>
</head>
<body>
<div>客户端使用JSONP跨域</div>
<script>
function getData(data){
alert(data.message+data.count);
}
</script>
<script src="https:www.xxx.com/yyy?id=123&callback=getData" type="text/javascript"></script>
</body>
</html>
这里就简单讲解完了JSONP，如有错误，请指教。。。
上一篇： vue中axios跨域请求
下一篇： springboot之跨域