小編這次要給大家分享的是JSONP如何解決JS跨域問題，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),林芝企業(yè)網(wǎng)站建設(shè),林芝品牌網(wǎng)站建設(shè),網(wǎng)站定制,林芝網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,林芝網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

現(xiàn)代編程中前后端都已經(jīng)是分開部署了，前端有自己的域，后端也有自己的域。由于瀏覽器同源策略的限制，非同源下的請求，就會產(chǎn)生跨域問題。解決跨域問題的方法有很多種，例如CORS(cross orign resources share)和JSONP。這里我就著重介紹一下jsonp的解決方案。

一：基礎(chǔ)概念

同源策略：同一協(xié)議，同一域名，同一端口號。只要不滿足三者其中一種都是屬于跨域問題。

舉幾個簡單的例子

1: https://www.a.com:8080到http://www.a.com:8080的請求會出現(xiàn)跨域（域名、端口相同但協(xié)議不同）

2: https://www.a.com:8080到https://www.b.com:8080的請求會出現(xiàn)跨域（協(xié)議、端口相同但域名不同）

3: https://www.a.com:8080到https://www.a.com:9090的請求會出現(xiàn)跨域（協(xié)議、域名相同但端口不同）

跨域：跨域的安全限制都是對瀏覽器端來說的，服務(wù)器端是不存在跨域安全限制的。瀏覽器的同源策略限制從一個源加載的文檔或腳本與來自另一個源的資源進(jìn)行交互。

二：區(qū)別JSON和JSONP

• JSON的全稱為JavaScript Object Notation，是一種輕量級的數(shù)據(jù)交互格式。它基于 ECMAScript (歐洲計算機(jī)協(xié)會制定的js規(guī)范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡單來說，json就是一種用來傳輸數(shù)據(jù)的數(shù)據(jù)格式。
• JSONP是一種非正式傳輸協(xié)議，該協(xié)議的一個要點就是允許用戶傳遞一個callback(或者一開始就定義一個回調(diào)方法)參數(shù)給服務(wù)端，然后服務(wù)端返回數(shù)據(jù)時會將這個callback 參數(shù)作為函數(shù)名來包裹住 JSON 數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)了。

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

我們發(fā)現(xiàn)，在web頁面調(diào)用js文件是不受是否跨域問題的影響的。而且我們還發(fā)現(xiàn)凡是擁有 src這個屬性的標(biāo)簽都擁有跨域的能力，比如img和script。在html頁面中我們經(jīng)常會做引入圖片的操作，通過img標(biāo)簽中的src屬性，我們就可以請求得到一個靜態(tài)資源。

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

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

四：原理及跨域?qū)崿F(xiàn)

具體流程( 原理)

jsonp的執(zhí)行流程其實就是簡單的兩步。第一，在前端預(yù)先定義好一個帶參數(shù)的回調(diào)函數(shù)用來接受后端傳來的數(shù)據(jù)。第二，在后端啟動一個server服務(wù)，將要傳的數(shù)據(jù)以定義好了的回調(diào)函數(shù)名加上返回結(jié)果的方式傳給前端。

// 前端部分

//后端部分
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標(biāo)簽的原因，瀏覽器會把這一段字符串當(dāng)做js來執(zhí)行。這樣我們一開始在前端定義好了的回調(diào)就會執(zhí)行，我們就拿到數(shù)據(jù)了。

封裝

以上只是有一個簡單的請求，實際項目中肯定會有很多個請求，我們肯定不可以定義一排的script標(biāo)簽和回調(diào)函數(shù)。這樣寫出來的代碼就太不靈活了。封裝的目的之一也就是為了前端可以靈活地修改預(yù)定義回調(diào)函數(shù)的名字，而不是在前后端把回調(diào)函數(shù)定死。同時，把代碼封裝以后，我們就不用手動地創(chuàng)建回調(diào)函數(shù)了，封裝后的函數(shù)會幫我們自動放src的地址，自動創(chuàng)建回調(diào)函數(shù)名。

// 后端
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中執(zhí)行）

五：總結(jié)

1: 優(yōu)點

• 它不像XMLHttpRequest對象實現(xiàn)的Ajax請求那樣受到同源策略的限制
• 它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持
• 并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果

2: 缺點

它 只支持GET請求而不支持POST等其它類型的HTTP請求

它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進(jìn)行JavaScript調(diào)用的問題

看完這篇關(guān)于JSONP如何解決JS跨域問題的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。