為什么會存在跨域問題？

因為所有支持JavaScript的瀏覽器都有一個叫做“同源策略”的安全策略。
具體怎么個策略法不是本章所探討的。
這個安全策略就導致了不能跨域請求。

什么是跨域？

跨域大概就是你以一個‘http://localhost:3000’去請求了一個‘http://localhost:3001’的資源（反之亦然）。
我們的瀏覽器就會很友好地給我們提示：

image

此處用的是fetch

但是很多時候，我們特別需要跨域，所以市面上出現(xiàn)了聞名的jsonp用來解決跨域問題。

jsonp是如何實現(xiàn)跨域的？

jsonp的實現(xiàn)遵循了一個原理：

js文件是可以不受安全策略的限制而隨便下載的

所以，我們可以在html的頂部加上我們要請求的資源，例如：

<script type="text/javascript" src="http://localhost:3000/test.js></script>

通過查看瀏覽器的network，這個資源是請求到了，跨域也成功了！

jsonp就是通過這個原理來實現(xiàn)跨域的，當然不僅僅是這些。

簡易代碼實現(xiàn)jsonp跨域

眾所周知，jsonp的跨域，是要帶上callback函數(shù)的。

我們把本地實現(xiàn)的back函數(shù)傳遞過去 ?callback=back

<script>
    function back(data) {
        console.log(data);
    }
</script>
       
<script type="text/javascript" src="http://localhost:3000/test.js?callback=back"></script>
  

在http://localhost:3000/test.js里，我們只需要執(zhí)行back函數(shù)即可：

back({message:"success"});

并且返回了json

{ 
    message:"success"
}

約定回調(diào)函數(shù)名很重要！約定回調(diào)函數(shù)名很重要！約定回調(diào)函數(shù)名很重要！

額外小細節(jié)

如果我在http://localhost:3000/test.js里，我不用我們約定的back回調(diào)函數(shù)名，那么我們的控制什么都不會打印，比如我此刻：

say({message:"success"});

image

沒有定義say所以控制臺報錯啦！

同理，如果你重復定義

const back = ({message:"success"});

也會報錯：

image

這都是語法問題啦！