利用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的請求會出現跨域（域名不同）
突破同源策略限制：
現在知道了同源策略，那我們就來看下jsonp是如何突破同源策略的限制實現跨域的

首先，不知道大家有沒有注意，不管是我們的script標簽的src還是img標簽的src，或者說link標簽的href他們沒有被通源策略所限制，比如我們有可能使用一個網絡上的圖片，就可以請求得到

<img src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=6d0bf83bda00baa1a52c41bb7711b9b1/0b55b319ebc4b745b19f82c1c4fc1e178b8215d9.jpg">
src或href鏈接的靜態資源，本質上來說也是一個get請求，拿csdn上的靜態資源舉例：



可以看到，確實是個get請求無疑。同理img標簽的src和link標簽的href也會發送一個get請求去請求靜態資源。那么我們通過這點，是不是發現了點什么，這些標簽的src和link屬性，並沒有受同源策略的限制。說到這里jsonp的實現原理就浮出水面了。

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

JSONP跨域實現：
根據上邊所說的，我們要用過利用img、srcipt，link標簽的src或href屬性（到底使用那個標簽無所謂）來實現，那么我們如何做呢，我們來看一段簡單的代碼，為了方便，我這里使用jQuery：

$('#btn').click(function(){
            var frame = document.createElement('script');
            frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
            $('body').append(frame);
        });
可以看到，讓我們點擊按鈕的時候，創建了一個script標簽(即會發送一個get請求到src指向的地址)，src地址是"localhost:3000/article-list",這個src地址，就是我們請求的服務端接口。注意，這里我們有是那個參數，name,age和callback，name和age不說了，這跟我們平時普通的get請求參數無異。主要說下callback這個參數，callback參數就是核心所在。為什么要定義callback呢？首先我們知道，這個get請求已經被發出去了，那么我們如何接口請求回來的數據呢，callback=func則可以幫我們做這件事。我們繼續看下邊的代碼 

<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>
這里可以看到，我們聲明了一個func函數，但沒有執行，你可以想一下，如果服務端接口到get請求，返回的是func({message:'hello'})，這樣的話在服務端不就可以把數據通過函數執行傳參的方式實現數據傳遞了嗎。

服務端代碼實現：
接下來，我們看服務端應該如何實現：

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 + ')');
});
ok，接下來當我們點擊提交的時候，就獲取到了服務端反回的數據。如下：



這樣下來，就完成了實現jsonp的跨域。
————————————————
版權聲明：本文為CSDN博主「姓趙的趙先生」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/badmoonc/article/details/82289252