json解決跨域的實現方法及原理

1. 先了解一下同源策略
   同源策略（英文全稱 Same origin policy）是瀏覽器提供的一個安全功能
   MDN官方給定的概念：同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互這是一個用於隔離潛在惡意文件的重要安全機制
   通俗的理解：瀏覽器規定，A 網站的 JavaScript，不容許和非同源的網站 C 之間，進行資源的交互
   例如：

   ① 沒法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB
        ② 沒法接觸非同源網頁的 DOM
        ③ 沒法向非同源地址發送 Ajax 請求

2. 再瞭解一下跨域
   同源指的是兩個 URL 的協議、域名、端口一致，反之，則是跨域

   出現跨域的根本緣由：**瀏覽器的同源策略**不容許非同源的 URL 之間進行資源的交互
    **注意** 瀏覽器容許發起跨域請求，可是，跨域請求回來的數據，會被瀏覽器攔截，沒法被頁面獲取到！

   現現在，實現跨域數據請求，最主要的兩種解決方案，分別是 JSONP 和 CORS。
   JSONP出現的早，兼容性好（兼容低版本IE）。是前端程序員爲了解決跨域問題，被迫想出來的一種臨時解決方案。缺點是隻支持 GET 請求，不支持 POST 請求。
   CORS：出現的較晚，它是 W3C 標準，屬於跨域 Ajax 請求的根本解決方案。支持 GET 和 POST` 請求。缺點是不兼容某些低版本的瀏覽器
   其中：CORS主要是後臺工做人在作 通常就是使用一箇中間鍵先截取全部的請求而後再放行

   // 跨域訪問
   app.use((req, res, next) => {
       // 1. 容許那些客戶端訪問
       // * 表明容許全部的客戶訪問我
       res.header('Access-Control-Allow-Origin', '*')
       // 2. 容許客戶端使用那些請求方式訪問我
       res.header('Access-Control-Allow-Methods', 'get post,put,delete')
       next();
   })

3. 瞭解jsonp
   JSONP (JSON with Padding) 是 JSON 的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。
   JSONP的實現原理
   因爲瀏覽器同源策略的限制，網頁中沒法經過 Ajax 請求非同源的接口數據。可是 <script> 標籤不受瀏覽器同源策略的影響能夠經過 src 屬性，請求非同源的 js 腳本。
   所以，JSONP 的實現原理，就是經過 <script> 標籤的 src 屬性，請求跨域的數據接口，而遠程服務端經過調用指定的函數並傳入參數來實現傳遞參數

   //定義一個success回調函數
   <script>
        function success(data) {
        console.log('獲取到了data數據：')
        console.log(data)
        }
    </script>
    //經過 <script> 標籤，請求接口數據：
    <script src="http://ajax:3006/api/jsonp?callback=success&name=zs&a
   ge=20"></script>

   JSONP的缺點
   因爲 JSONP 是經過 <script> 標籤的 src 屬性，來實現跨域數據獲取的，因此，JSONP 只支持 GET 數據請求，不支持 POST 請求。
   注意： JSONP 和 Ajax 之間沒有任何關係，不能把 JSONP 請求數據的方式叫作 Ajax，由於 JSONP 沒有用到XMLHttpRequest 這個對象

   jQuery中的JSONP
jQuery 提供的 $.ajax() 函數，除了能夠發起真正的 Ajax 數據請求以外，還可以發起 JSONP 數據請求，例如：

   $.ajax({
        url: 'http://ajax/api/jsonp?name=zs&age=20',
        // 若是要使用 $.ajax() 發起 JSONP 請求，必須指定 datatype 爲 jsonp
        dataType: 'jsonp',
        success: function(res) {
        console.log(res)
        }
   })

   默認狀況下，使用 jQuery 發起 JSONP 請求，會自動攜帶一個 callback=jQueryxxx 的參數，jQueryxxx 是隨機生成的一個回調函數名稱

   自定義參數及回調函數名稱
   在使用 jQuery 發起 JSONP 請求時，若是想要自定義 JSONP 的參數以及回調函數名稱，能夠經過以下兩個參數來指定：

   $.ajax({
        url: 'http://ajax/api/jsonp?name=zs&age=20',
        dataType: 'jsonp',
        // 發送到服務端的參數名稱，默認值爲 callback
        jsonp: 'callback',
        // 自定義的回調函數名稱，默認值爲 jQueryxxx 格式
        jsonpCallback: 'abc',
        success: function(res) {
        console.log(res)
        }
   })

   jQuery中JSONP的實現過程
   jQuery 中的 JSONP，也是經過 <script> 標籤的 src 屬性實現跨域數據訪問的，只不過，jQuery 採用的是動態建立和移除標籤的方式，來發起 JSONP 數據請求。

   • 在發起 JSONP 請求的時候，動態向 頁面 中 append 一個 <script> 標籤；
   • 在 JSONP 請求成功之後動態從頁面中移除剛纔 append 進去的 <script> 標籤；

   function jsonp(obj) {
               // 1. 動態的建立一個script標籤，添加到頁面中
               var script = document.createElement('script');
               document.body.appendChild(script);
               // 2. 設置src屬性，發送script標籤的跨域請求
               // 你要執行執行哪一個函數,經過callback這個屬性發過來
               script.src = obj.url + "?callback=fn&name=zs&age=23";
               // 3. 這個是接受請求後(接收的數據是一個執行函數)，頁面中要提早有這個函數
               window.fn = obj.success;
               // 4. 使用完畢以後刪除script標籤
               script.onload = function () {
                   this.remove();
               }
           }
           // 具體應用
           jsonp({
               url: 'http://www.ajax.fronted.gywalker:1209/api/jsonp',
               success: function (res) {
                   console.log(res);
               }
           })