js處理跨域的方案之jsonp用法詳解

更新時間：2024年11月26日 10:46:56 作者：嚶嚶怪呆呆狗

這篇文章主要介紹了js處理跨域的方案之jsonp用法的相關(guān)資料,文中分享了前端調(diào)用后端接口的三種方式：Ajax、fetch、axios,并詳細解釋了同源策略和跨域的概念,需要的朋友可以參考下

1. 引言

在實際開發(fā)中，數(shù)據(jù)都是后端返回的，那就需要前端調(diào)用后端的接口，來拿到數(shù)據(jù)

前端中調(diào)接口的方式一般有如下三種

Ajax
fecth
axios 這個是最常用的

涉及到調(diào)后端接口的話，后端的接口和前端肯定不在一個端口，甚至不在一個域名下，這樣就會導致跨域

fetch('https://editor.csdn.net/md?not_checkout=1&spm=1011.2415.3001.6217&articleId=141032145')

因為請求的主機地址和請求的地址，協(xié)議端口域名都不一樣，所以導致了跨域

2. 同源策略和跨域

同源策略
同源：協(xié)議、域名、端口，三者全部相同，才是同源。

同源策略是瀏覽器最核心也最基本的安全機制，它限制了來自不同源（即域、協(xié)議或端口）的文檔或腳本之間的交互操作。
具體來說，同源策略要求如果兩個頁面的協(xié)議、域名和端口均相同，則它們被視為同源，否則即為非同源。

根據(jù)同源策略，瀏覽器只允許當前網(wǎng)頁與同一源下的其他資源進行交互，包括讀取和修改。
換句話說，JavaScript腳本在一個源中加載的頁面只能與同一源中的頁面進行通信，而無法直接對不同源的頁面進行讀寫操作。

同源策略的主要目的是防止惡意網(wǎng)站竊取或篡改其他網(wǎng)站的敏感信息，從而保護用戶的隱私和安全。

跨域

協(xié)議、域名、端口，只要有一個的不同，就是跨域。

URL	是否跨域	備注
http://www.baidu.com/1.html 和 http://www.baidu.com/2.html	否	協(xié)議端口域名一樣，即為同源
http://www.baidu.com/1.html 和 http://www.csdn.com/2.html	是	域名不同
http://www.baidu.com:7000/1.html 和 http://www.baidu.com:8000/2.html	是	端口不同
https://www.baidu.com/1.html 和 http://www.baidu.com/2.html	是	協(xié)議不同

注意： localhost 和 127.0.0.1 也是構(gòu)成了跨域

3. html 存在的特殊情況

html 中有以下幾個標簽，是可以引入與當前頁面不同(跨域) 的地址的

script標簽
img 標簽
link 標簽
video 標簽
audio 標簽
iframe 標簽

4. JSONP

JSONP 其實是跨域的一種解決方案 JSONP 全稱“JSON with Padding”，譯為“帶回調(diào)的 JSON”，它是 JSON 的一種使用模式。通過 JSONP 可以繞過瀏覽器的同源策略，進行跨域請求。

jsonp 的本質(zhì)是：利用 script 標簽的src 屬性 不受跨域的影響。

前端具體操作

在JS腳本中，先定義一個函數(shù) 用來處于后端返回的數(shù)據(jù)
通過js 腳本，創(chuàng)建 script 標簽，src 設(shè)置為后端接口地址，并且請求地址中加上第一步定義的函數(shù)名稱
把這個 script 插入到DOM中，調(diào)用接口

后端具體操作

開啟一個接口服務(wù)
解析出來請求地址查詢參數(shù)中的callback 的值
返回文本類型，格式是 callback的值(后端數(shù)據(jù)) 比如：abc([{name:”1"},{ name:“2” }]) 服務(wù)器返回的內(nèi)容，必須是一段可執(zhí)行的 JavaScript 代碼，不能是其它內(nèi)容

前端代碼如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>點擊調(diào)用接口</button>
  <script>
    function getUser(list) {
      console.log('user', list);
      // 創(chuàng)建一個新的空白的文檔片段
      let fragment = document.createDocumentFragment();
      list.forEach(item => {
        let div = document.createElement('div');
        div.innerHTML = item.name;
        fragment.appendChild(div);
      });
      document.body.appendChild(fragment);
    }

    document.querySelector('button').onclick = function () {
      // 1、創(chuàng)建script 標簽
      let scriptEl = document.createElement('script');
      // 2、設(shè)置 src 地址，并且傳遞過去 處理返回數(shù)據(jù)的函數(shù)名稱
      scriptEl.src = 'http://127.0.0.1:8080/api/getUserList?callback=getUser';
      // 3、插入到DOM
      document.body.appendChild(scriptEl);
    }
  </script>
</body>

</html>

后端代碼如下

const htpp = require("http");
const url = require("url");
const querystring = require("querystring");

const userList = [
  { id: 1, name: "張三" },
  { id: 2, name: "李四" },
  { id: 3, name: "王五" },
];
const server = htpp
  .createServer((req, res) => {
    const parsedUrl = url.parse(req.url);
    const queryParams = querystring.parse(parsedUrl.query);
    console.log(req.url, queryParams);

    if (req.url.split("?")[0] === "/api/getUserList") {
      res.end(`${queryParams.callback}(${JSON.stringify(userList)})`);
    } else {
      res.end("404 Not Found");
    }
  })
  .listen(8080);