前端進階之路：8種方案教你如何實現跨域？

跨域是個比較古老的命題了，歷史上跨域的實現手段有很多，我們現在主要介紹三種比較主流的跨域方案，其餘的方案我們就不深入討論了，因為使用場景很少，也沒必要記這麼多奇技淫巧。

最經典的跨域方案jsonp

jsonp本質上是一個Hack，它利用<script>標籤不受同源策略限制的特性進行跨域操作。</p><p>jsonp優點：</p><ul><li>實現簡單</li><li>兼容性非常好</li></ul><p>jsonp的缺點：</p><ul><li>只支持get請求（因為<script>標籤只能get）</li><li>有安全性問題，容易遭受xss攻擊</li><li>需要服務端配合jsonp進行一定程度的改造</li></ul><p>jsonp的實現：</p><pre>function JSONP({ <br> url,<br> params,<br> callbackKey,<br> callback<br>}) {<br> // 在參數裡制定 callback 的名字<br> params = params || {}<br> params[callbackKey] = 'jsonpCallback'<br> // 預留 callback<br> window.jsonpCallback = callback<br> // 拼接參數字符串<br> const paramKeys = Object.keys(params)<br> const paramString = paramKeys<br> .map(key => `${key}=${params[key]}`)<br> .join('&')<br> // 插入 DOM 元素<br> const>