1. JSONP 是一種跨域問題解決方案，它利用了 script、img、iframe、link 等標籤可以跨域的性質，來避免瀏覽器同源策略對跨域的限制. 不過除了 script ，其他標籤均接收不到伺服器資料.

2. JSONP 跨域步驟：

【1】JavaScript 實現對 URL 和 查詢字串 的拼接，並加上“callback=回撥函式名”

【2】將拼接後的 URL 賦值給 script 標籤的 src 屬性

【3】定義全域性函式 window[funcName] 用於動態回撥

【4】script 忽略瀏覽器同源策略的限制，跨域請求目標資源，伺服器收到訪問請求後，獲取查詢字串，並得到回撥函式名

【5】伺服器返回的是一段 JavaScript 語法文件，因此動態呼叫回撥函式，若使用 express 框架，即為 res.send(`${callback}('${data}')`)，此處 data 為一個變數名，存放著需要返回的資料

<script>
  function myJsonp(url, params, callback) {
    /* funcName 防止重名，隨機生成 */
    let funcName = 'myJson_' + Math.random().toString().substr(2, 5);
    let arr = [];
    for
 
 (let key in params) {
      arr.push(`${key}=${params[key]}`)
    }
    arr.push(`callback=${funcName}`);
    // 建立 script 標籤，並賦值 script.src
    const script = document.createElement('script');
    script.src = `${url}?${arr.join("&")}`;
    document.body.appendChild(script); // 在DOM中新增 script 標籤，則後面會執行 script 請求伺服器
 

    // 在 JavaScript 中定義全域性函式
    window[funcName] = function (data) {
      callback(data);
      document.body.removeChild(script);
    }
  }
  // 使用myJsonp
  myJsonp("http://localhost:3000/index",
      {params: "我是coolFish"},
      (data) => {
        console.log(data + ' hello express');
      })
</script>

Express 部分：首先安裝依賴npm install express --save-dev，建立index.js檔案，寫入下面程式碼，執行node index.js

const express = require("express");
const app = express();
app.get("/index", (req, res) => {
  let { params, callback } = req.query; // 獲取查詢字串
  console.log(params); // 我是coolFish
  console.log(callback); // funcName的值：【隨機】myJson_05639
  /* res.send() 括號裡的內容會被當做 JavaScript 語法解析 */
  res.send(`${callback}('${params}') 
    console.log('test res.send()');
  `);
});

app.listen(3000, () => {
  console.log("服務開啟成功了"); //yellow
});

結果：