jsonp 解決瀏覽器跨域問題 087

時(shí)間：2023-02-20 18:30:01 | 來源：建站知識(shí)

時(shí)間：2023-02-20 18:30:01 來源：建站知識(shí)

jsonp 解決瀏覽器跨域問題 087： 一、 JsonP 簡介

1 什么是 JsonP

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）

那獲取資料，即跨域讀取數(shù)據(jù)。

為什么我們從不同的域（網(wǎng)站）訪問數(shù)據(jù)需要一個(gè)特殊的技術(shù)(JSONP )呢？這是因?yàn)橥?br>
源策略。

2 什么是跨域？

跨域是指一個(gè)域（網(wǎng)站）下的文檔或腳本試圖去請(qǐng)求另一個(gè)域（網(wǎng)站）下的資源

3 什么是同源策略？

同源策略/SOP（Same origin policy）是一種約定，由 Netscape 公司 1995 年引入瀏覽器，

它是瀏覽器最核心也最基本的安全功能，現(xiàn)在所有支持 JavaScript 的瀏覽器都會(huì)使用這個(gè)策

略。如果缺少了同源策略，瀏覽器很容易受到 XSS、CSFR 等攻擊。所謂同源是指"協(xié)議+域

名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè) ip 地址，也非同源。

3.1非同源策略限制以下幾種行為：

1.) Cookie、LocalStorage 和 IndexDB 無法讀取

2.) DOM 和 Js 對(duì)象無法獲得

3.) AJAX 請(qǐng)求不能發(fā)送

4 常見跨域場(chǎng)景

URL 說明 是否允許通信

http://www.domain.com/a.js

http://www.domain.com/b.js 同一域名，不同文件或路徑 允許

http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js

http://www.domain.com/b.js 同一域名，不同端口 不允許

http://www.domain.com/a.js

https://www.domain.com/b.js 同一域名，不同協(xié)議 不允許

http://www.domain.com/a.js

http://192.168.4.12/b.js 域名和域名對(duì)應(yīng)相同 ip 不允許

http://www.domain.com/a.js

http://x.domain.com/b.js 主域相同，子域不同 不允許

http://domain.com/c.js

http://www.domain1.com/a.js

http://www.domain2.com/b.js 不同域名 不允許

5 跨域解決方案

1） 通過 jsonp 跨域

2） document.domain + iframe 跨域

3） location.hash + iframe

4） window.name + iframe 跨域

5） postMessage 跨域

6） 跨域資源共享（CORS）

7） nginx 代理跨域

8） nodejs 中間件代理跨域

9） WebSocket 協(xié)議跨域

6 JsonP 優(yōu)缺點(diǎn)

JSONP 的優(yōu)點(diǎn)是：它不像 XMLHttpRequest 對(duì)象實(shí)現(xiàn)的 Ajax 請(qǐng)求那樣受到同源策略的

限制；它的兼容性更好，在更加古老的瀏覽器中都 可以運(yùn)行，不需要 XMLHttpRequest 或

ActiveX 的支持；并且在請(qǐng)求完畢后可以通過調(diào)用 callback 的方式回傳結(jié)果。

JSONP 的缺點(diǎn)則是：它只支持 GET 請(qǐng)求而不支持 POST 等其它類型的 HTTP 請(qǐng)求；它

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

的問題