JSONP解決同源策略限制引起跨域問題原理

更新時間：2023年08月04日 10:31:14 作者：Qing

這篇文章主要為大家介紹了JSONP解決同源策略限制引起跨域問題原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

同源策略的限制引起跨域問題

同源策略

為了解決跨域問題，大家利用script標簽請求src指向的資源不受同源策略限制的特性來進行資源的請求，這種方式就是JSONP。

接口實現(xiàn)

我們可以利用script標簽請求資源不受同源策略限制的特性，可以自己簡單的封裝一個jsonp請求函數(shù)。
首先在js代碼中手動創(chuàng)建script標簽，把需要請求的資源放到src屬性上，然后把script標簽加入到body標簽里面，在解析html的過程中就會執(zhí)行，當執(zhí)行完script并且請求到資源后，后端結(jié)果會以函數(shù)調(diào)用的的形式返回字符串類型的響應(yīng)結(jié)果，這個形式的具體結(jié)構(gòu)為函數(shù)名稱(函數(shù)實參)，和平時我們在調(diào)用函數(shù)時沒有區(qū)別，然后頁面就會執(zhí)行后端返回的函數(shù)。

這里有個問題，頁面會調(diào)用后端返回的函數(shù)，那么這個函數(shù)在哪里定義？

當然是要在本地的js代碼里面定義這個函數(shù)，然后等待后端傳遞的參數(shù)，這個參數(shù)其實就是我們想要的返回結(jié)果。

// 簡單寫個序列化函數(shù)，不要就結(jié)是否考慮全面
function stringify(params) {
  let res = "";
  if (!params || typeof params !== "object") {
    throw new Error("請傳遞參數(shù)對象");
  }
  Object.keys(params).forEach((key) => {
    res += `&${key}=${params[key]}`;
  });
  return res.slice(1);
}
function jsonp({ url, params }) {
  return new Promise((resolve) => {
    const callback = `jsonp_${Math.ceil(Math.random() * 10000)}`;
    const script = document.createElement("script");
    script.src = `${url}?${stringify({ callback, ...params })}`;
    document.body.appendChild(script);
    // 一般情況下，函數(shù)的定義放置在window對象上，否則在調(diào)用函數(shù)的時候會找不到定義的實現(xiàn)
    window[callback] = function (data) {
      if (window[callback]) {
        delete window[callback];
      }
      document.body.removeChild(script);
      resolve(data);
    };
  });
}

發(fā)送JSONP請求

利用封裝的jsonp發(fā)起請求

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>jsonp請求</title>
  </head>
  <body>
    <button>點我就會biubiubiu地發(fā)送請求</button>
  </body>
  <script>
    const button = document.querySelector("button");
    button.onclick = function () {
      jsonp({ url: "http://localhost:8888" }).then(console.log);
    };
  </script>
</html>

服務(wù)端處理JSONP請求

jsonp請求需要服務(wù)端配合，約定查詢參數(shù)callback是在本地定義好的函數(shù)，根據(jù)傳遞過來的callback返回其函數(shù)調(diào)用，并把數(shù)據(jù)通過實參的方式返回給客戶端。

const http = require("http");
const url = require("url");
const qs = require("querystring");
const server = http.createServer((req, res) => {
  const { query } = url.parse(req.url);
  const params = qs.parse(query);
  if (params.callback) {
    const data = `${params.callback}(${JSON.stringify({ a: 1, b: 2 })})`;
    res.end(data);
  }
});
server.listen(8888, () => {
  console.log("server is listen 8888");
});

以上就是JSONP解決同源策略限制引起跨域問題原理的詳細內(nèi)容，更多關(guān)于JSONP同源策略跨域限制的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: