6種跨域方式實現原理

1.jsonp

（1）jsonp原理

利用script標籤沒有跨域限制的漏洞，網頁可以得到從其他**動態生產的json數，jsonp請求一定要對方的伺服器做支援才可以。

(2) jsonp和ajax對比

相同點：都是客戶端向服務端傳送請求，從服務端獲取資料的方式。

不同點：ajax屬於同源策略，jsonp屬於非同源策略。

（3）jsonp的優缺點

優點：簡單相容性好，可以解決主流瀏覽器的跨域資料訪問問題。

缺點：僅支援get方法，具有侷限性，不安全可能會遭受xss攻擊

（4）jsonp的實現流程

function

jsonp()
params =
// wd=b&callback=show
let arrs =
for(
let key in params)=$
`)} script.src =`$
?$` document.body.
(script)})
}jsonp(,
callback:
'show'})
.then
(data =>
)//相當於向http://localhost:3000/say?wd=iloveyou&callback=show 這個位址請求資料

jquery缺省會給jsonp的請求清除快取。

$.

ajax(}
);

postmessage是html5 xmlhttprequest level 2 中的api，且是為數不多可以跨域操作的window屬性之一，它可用於解決一下方面的問題

otherwindow.postmessage(message,targetorigin,[transfer])

//等它載入完觸發乙個事件

//內嵌在http://localhost:3000/a.html

function

load()

}<

/script>

// b.html

window.

onmessage

=function

(e)3、websocket

websocket是html5的乙個持久化的協議，它實現了瀏覽器與伺服器的全雙工通訊，同時也是跨域的一種解決方案。websocket和http都是應用層協議，都基於tcp協議。但是websocket是一種雙向通訊協議，在建立連線之後，websocket的server和client都能主動先對方傳送或接受資料。

原生websocket api使用起來不方便，我們使用socket.io，它很好封裝了websocket介面，提供更簡單、靈活的介面，也對不支援websocket的瀏覽器提供向下相容。

例子：本地檔案socket.html向localhost:3000發生資料和接受資料

// socket.html

let socket =
newwebsocket
('ws://localhost:3000');
socket.
onopen
=function()
socket.
onmessage
=function
(e)<
/script>

實現原理：同源策略是瀏覽器需要遵循的標準，而如果是伺服器向伺服器請求就不需要遵循同源策略。

**伺服器步驟如下：

// index.html(

"">
<
/script>
$.ajax(,
contenttype:
, success:
function
(result)},
error:
function
(msg)})
<
/script>

// server1.js **伺服器(http://localhost:3000)

)// 第一步：接受客戶端請求
)// 第二步：將請求**給伺服器
)

5、nginx 反向**（最簡單的跨域方式）

// proxy伺服器

server 
}

cors需要瀏覽器和後端同時支援，ie8 和8需要通過xdomainrequest來實現。

瀏覽器會自動進行cors通訊，實現cors通訊的關鍵是後端，只要後端實現了cors，就實現跨域。

服務端設定 access-control-allow-origin 就可以開啟 cors。 該屬性表示哪些網域名稱可以訪問資源，如果設定萬用字元則表示所有**都可以訪問資源。

雖然設定 cors 和前端沒什麼關係，但是通過這種方式解決跨域問題的話，會在傳送請求時出現兩種情況，分別為簡單請求和複雜請求。

簡單請求

只要同時滿足以下兩大條件，就屬於簡單請求

條件1：使用下列方法之一：

gethead

post

條件2：content-type 的值僅限於下列三者之一：

我們用put向後台請求時，屬於複雜請求。

總結

九種跨域方式實現原理

前後端資料互動經常會碰到請求跨域，什麼是跨域，以及有哪幾種跨域方式，這是本文要 的內容。本文完整的源 請猛戳github 部落格 同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到 xss csfr 等攻擊。所謂同源是指 協議 網域名稱 埠 三者相同，即便兩...

js跨域，九種跨域方式的實現原理

什麼是跨域？1.什麼是同源策略及其限制內容？同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到xss csrf等攻擊。所謂同源是指 協議 網域名稱 埠 三者相同，即便兩個不同的網域名稱指向同乙個ip位址，也非同源。同源策略限制內容有 cookie local...

JavaScript 九種跨域方式實現原理

前言 前後端資料互動經常會碰到請求跨域，什麼是跨域，以及有哪幾種跨域方式，這是本文要 的內容。一 什麼是跨域？1.什麼是同源策略及其限制內容？同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到 xss csfr 等攻擊。所謂同源是指 協議 網域名稱 埠 三者...