jsonp跨域解析

背景：

由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。

什么是同源？

同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。

举个简单的例子：

http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域（协议不同）
http://www.abc.com:3000到http://www.abc.com:3001的请求会出现跨域（端口不同）
http://www.abc.com:3000到http://www.def.com:3000的请求会出现跨域（域名不同）

我们注意到src和href都可以进行跨域请求(一个get请求)

jsonp就是使用通源策略这一“漏洞”，实现的跨域请求（这也是jsonp跨域只能用get请求的原因所在）。想象一下，既然是个get请求，那么服务端一定可以接收到，并做出反馈。ok，知道这两点之后，我们开始具体使用jsonp进行跨域请求。

<button id="btn">点击</button> 
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 
 <script>   
 $('#btn').click(function(){            
var frame = document.createElement('script');           
frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func'; 
$('body').append(frame);    
    
});             
function func(res){         
alert(res.message+res.name+'你已经'+res.age+'岁了');     
}  </script>

上述代码其实是一个get请求，服务器对于get请求一定可以收到，并做出回应。

贴一下服务器的流程

router.get('/article-list', 
(req, res) => {  
console.log(req.query, '123'); 
 let data = {    
message: 'success!',    
name: req.query.name,    
age: req.query.age  
} 
 data = JSON.stringify(data)  
res.end('func(' + data + ')');});

看到返回的是'func(' + data + ')'，到前端就是调用回调函数。

其实jsonp的整个过程就类似于前端声明好一个函数，后端返回执行函数。执行函数参数中携带所需的数据。