現代程式設計中前後端都已經是分開部署了，前端有自己的域，後端也有自己的域。由於瀏覽器同源策略的限制，非同源下的請求，就會產生跨域問題。解決跨域問題的方法有很多種，例如CORS(cross orign resources share)和JSONP。這裡我就著重介紹一下jsonp的解決方案。

一：基礎概念

同源策略：同一協議，同一域名，同一埠號。只要不滿足三者其中一種都是屬於跨域問題。

舉幾個簡單的例子

1: https://www.a.com:8080到http://www.a.com:8080的請求會出現跨域（域名、埠相同但協議不同）

2: https://www.a.com:8080到https://www.b.com:8080的請求會出現跨域（協議、埠相同但域名不同）

3: https://www.a.com:8080到https://www.a.com:9090的請求會出現跨域（協議、域名相同但埠不同）

跨域：跨域的安全限制都是對瀏覽器端來說的，伺服器端是不存在跨域安全限制的。瀏覽器的同源策略限制從一個源載入的文件或指令碼與來自另一個源的資源進行互動。

二：區別JSON和JSONP

• JSON的全稱為JavaScript Object Notation，是一種輕量級的資料互動格式。它基於 ECMAScript (歐洲計算機協會制定的js規範)的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。簡單來說，json就是一種用來傳輸資料的資料格式。
• JSONP是一種非正式傳輸協議，該協議的一個要點就是允許使用者傳遞一個callback(或者一開始就定義一個回撥方法)引數給服務端，然後服務端返回資料時會將這個callback 引數作為函式名來包裹住 JSON 資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

三：跳出同源的“舒適圈”

我們發現，在web頁面呼叫js檔案是不受是否跨域問題的影響的。而且我們還發現凡是擁有 src 這個屬性的標籤都擁有跨域的能力，比如img和script。在html頁面中我們經常會做引入圖片的操作，通過img標籤中的src屬性，我們就可以請求得到一個靜態資源。

我們可以看到這本質上就是一個GET請求，同理，link和script裡的href和src同樣可以通過GET請求去請求資源。

<script src="http://localhost:9090/api"></script>

我們可以看到這本質上就是一個GET請求，同理，link和script裡的href和src同樣可以通過GET請求去請求資源。它們並沒有受到同源策略的影響，jsonp的實現原理其實就是利用了這個策略的小“bug”，從而實現跨越請求的。既然是一個GET請求，伺服器一定可以收到這個請求並作出響應。下面就讓我們來具體實現一下吧！

四：原理及跨域實現

具體流程( 原理 )

jsonp的執行流程其實就是簡單的兩步。第一，在前端預先定義好一個帶引數的回撥函式用來接受後端傳來的資料。第二，在後端啟動一個server服務，將要傳的資料以定義好了的回撥函式名加上返回結果的方式傳給前端。

// 前端部分
<script>
  // 1 callback
  // 2 後端 callbackName(資料)
  function onResponse(posts) {
    console.log(posts);
  }
  // 前端沒有呼叫
</script>
<!-- 後端返回結果 -->
<!-- 呼叫 -->
<script src="http://localhost:9090/api"></script>

//後端部分
const http = require('http');
http.createServer((req,res) => {
  if (req.url === '/api') {
    let posts = ['js','php'];
    res.end(`onResponse(${JSON.stringify(posts)})`);
  }
})
.listen(9090,() => {
  console.log(9090)
})

前端script中的src請求完畢以後，後端會給前端返回一個字串onResponse(["js","php"])，因為script標籤的原因，瀏覽器會把這一段字串當做js來執行。這樣我們一開始在前端定義好了的回撥就會執行，我們就拿到資料了。

封裝

以上只是有一個簡單的請求，實際專案中肯定會有很多個請求，我們肯定不可以定義一排的script標籤和回撥函式。這樣寫出來的程式碼就太不靈活了。封裝的目的之一也就是為了前端可以靈活地修改預定義回撥函式的名字，而不是在前後端把回撥函式定死。同時，把程式碼封裝以後，我們就不用手動地建立回撥函數了，封裝後的函式會幫我們自動放src的地址，自動建立回撥函式名。

// 後端
const http = require('http');
const url = require('url');
http.createServer((req,res) => {
 // /api?callback=onResponse
 // 解析前端請求url中的callback名
 if(req.url.includes('/api')) {
  let myurl = url.parse(req.url);
  let params = new URLSearchParams(myurl.query)
  let posts = ['js','php'];
  let mathodName = params.get('callback');
  res.end(`${mathodName}(${JSON.stringify(posts)})`)
 }
})
.listen(9090,() => {
 console.log(9090);
})

// 前端（程式碼放在body中執行）
<script>
 function jsonp(url,options) {
  // 超時處理
  const { timeout } = options;
  return new Promise((resolve,reject) => {
   // 防止函式名衝突
   let funcName = `jsonp${Date.now()}`;
   let time = null,scriptNode;
   // 定義callback
   window[funcName] = function(data) {
    if (timeout) clearTimeout(time);
    resolve(data);
    // 很重要的效能優化點
    // 清除本次請求產生的回撥函式和script標籤
    delete window[funcName];
    document.body.removeChild(scriptNode);
   }
   // 建立script標籤
   scriptNode = document.createElement('script');
   // 給script標籤新增src屬性
   scriptNode.src = `${url}?callback=${funcName}`;
   // 發出請求
   document.body.appendChild(scriptNode);
   time = setTimeout(() => {
    reject('network err,timeout')
   },timeout)
   // 失敗
   scriptNode.onerror = function(err) {
   reject(err);
   }
  })
 }
 jsonp('http://localhost:9090/api',{
  callBack: 'res1',// 超時處理
  timeout: 3000
 })
 // 請求成功
 .then(res => {
  console.log('jsonp->',res);
 })
 // 請求失敗
 .catch(err => {
   console.log("network err!")
 })
</script>

五：總結

1: 優點

• 它不像XMLHttpRequest物件實現的Ajax請求那樣受到同源策略的限制
• 它的相容性更好，在更加古老的瀏覽器中都可以執行，不需要XMLHttpRequest或ActiveX的支援
• 並且在請求完畢後可以通過呼叫callback的方式回傳結果

2: 缺點

它 只支援GET請求 而不支援POST等其它型別的HTTP請求

它只支援跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript呼叫的問題

到此這篇關於JSONP解決JS跨域問題的實現的文章就介紹到這了,更多相關JSONP解決JS跨域內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！