背景：

由于瀏覽器同源策略的限制，非同源下的請求，都會產(chǎn)生跨域問題，jsonp即是為了解決這個問題出現(xiàn)的一種簡便解決方案。

什么是同源？

同源策略即：同一協(xié)議，同一域名，同一端口號。當(dāng)其中一個不滿足時，我們的請求即會發(fā)生跨域問題。

舉個簡單的例子：

http://www.abc.com:3000到https://www.abc.com:3000的請求會出現(xiàn)跨域（協(xié)議不同）
http://www.abc.com:3000到http://www.abc.com:3001的請求會出現(xiàn)跨域（端口不同）
http://www.abc.com:3000到http://www.def.com:3000的請求會出現(xiàn)跨域（域名不同）

我們注意到src和href都可以進(jìn)行跨域請求(一個get請求)

jsonp就是使用通源策略這一“漏洞”，實現(xiàn)的跨域請求（這也是jsonp跨域只能用get請求的原因所在）。想象一下，既然是個get請求，那么服務(wù)端一定可以接收到，并做出反饋。ok，知道這兩點之后，我們開始具體使用jsonp進(jìn)行跨域請求。

<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+'你已經(jīng)'+res.age+'歲了');     
}  </script>

上述代碼其實是一個get請求，服務(wù)器對于get請求一定可以收到，并做出回應(yīng)。

貼一下服務(wù)器的流程

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 + ')'，到前端就是調(diào)用回調(diào)函數(shù)。

其實jsonp的整個過程就類似于前端聲明好一個函數(shù)，后端返回執(zhí)行函數(shù)。執(zhí)行函數(shù)參數(shù)中攜帶所需的數(shù)據(jù)。