想從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