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

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

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

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

同源策略

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

接口實(shí)現(xiàn)

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

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

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

// 簡(jiǎn)單寫個(gè)序列化函數(shù)，不要就結(jié)是否考慮全面
function stringify(params) {
  let res = "";
  if (!params || typeof params !== "object") {
    throw new Error("請(qǐng)傳遞參數(shù)對(duì)象");
  }
  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對(duì)象上，否則在調(diào)用函數(shù)的時(shí)候會(huì)找不到定義的實(shí)現(xiàn)
    window[callback] = function (data) {
      if (window[callback]) {
        delete window[callback];
      }
      document.body.removeChild(script);
      resolve(data);
    };
  });
}

發(fā)送JSONP請(qǐng)求

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

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

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

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

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解決同源策略限制引起跨域問題原理的詳細(xì)內(nèi)容，更多關(guān)于JSONP同源策略跨域限制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: