JSONP（JSON with Padding）

想從javascript拿到不同源的資料，除了上一篇介紹的CORS，其實還有一個東西叫JSOP，是指透過script src="xxx"/script的方式繞過同源政策來實現cross origin。

事實上我們前端常用的jquery, angular, vue等等，透過cdn import進來的url一定都是非同源，那為什麼都沒有cross origin相關錯誤訊息出現呢? 因為script tag的src attribute不受同源政策限制。

以下直接用程式碼來了解:

利用script src="xxx"/script透過get method來要資料，傳入user id以及callback名稱，user id是讓server動態產生指定user的資料用的，callback是讓server知道javascript的callback function叫什麼名字。

後端其實就是根據傳入的user id抓取資料後，回傳一段js程式碼來呼叫前端的callback function(receiveData)把資料帶進去。

現在很少人在用JSONP了，因為只能用get method來送request，敏感資料不可能這樣傳，且如果需要帶進去的參數比較多，也有可能超過url長度限制。

本筆記參考: 1. https://medium.com/@brianwu291/jsonp-with-simple-example-4711e2a07443 2. https://medium.com/@miahsuwork/%E7%AC%AC%E4%B9%9D%E9%80%B1-%E9%80%8F%E9%81%8E%E7%80%8F%E8%A6%BD%E5%99%A8%E4%BA%A4%E6%8F%9B%E8%B3%87%E6%96%99-%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96-cors-%E7%AC%AC%E4%B8%89%E7%A8%AE%E6%96%B9%E5%BC%8F-jsonp-e45603886287 3. https://zh.wikipedia.org/wiki/JSONP