如何實現跨域？

1. 最經典的跨域方案jsonp

jsonp本質上是乙個hack，它利用標籤不受同源策略限制的特性進行跨域操作。

jsonp優點：

實現簡單

相容性非常好

jsonp的缺點：

只支援get請求（因為標籤只能get）

有安全性問題，容易遭受xss攻擊

需要服務端配合jsonp進行一定程度的改造

jsonp的實現：

function
jsonp()
params[callbackkey]
='jsonpcallback'
// 預留 callback
window.jsonpcallback = callback
// 拼接引數字串
const paramkeys = object.
keys
(params)
const paramstring = paramkeys
.map(key =>`$
=$`)
.join
('&'
)// 插入 dom 元素
const script = document.
createelement
('script'
) script.
setattribute
('src',`
$?$`
) document.body.
(script)
}jsonp(,
callbackkey:
'_cb'
,callback
(result)
})

2. 最流行的跨域方案cors

cors是目前主流的跨域解決方案，跨域資源共享(cors) 是一種機制，它使用額外的 http 頭來告訴瀏覽器讓執行在乙個 origin (domain) 上的web應用被准許訪問來自不同源伺服器上的指定的資源。當乙個資源從與該資源本身所在的伺服器不同的域、協議或埠請求乙個資源時，資源會發起乙個跨域 http 請求。

如果你用express，可以這樣在後端設定

/
cors middleware
varallowcrossdomain
=function
(req, res, next)
//...
configure
(function()
));use
(express.
methodoverride()
);use(allowcrossdomain)
;use
;use
(express.
static
(__dirname +
'/public'))
;});

**其它跨域方案

html5 xmlhttprequest 有乙個api，postmessage()方法允許來自不同源的指令碼採用非同步方式進行有限的通訊，可以實現跨文字檔、多視窗、跨域訊息傳遞。

websocket 是一種雙向通訊協議，在建立連線之後，websocket 的 server 與 client 都能主動向對方傳送或接收資料，連線建立好了之後 client 與 server 之間的雙向通訊就與 http 無關了，因此可以跨域。

window.name + iframe：window.name屬性值在不同的頁面（甚至不同網域名稱）載入後依舊存在，並且可以支援非常長的 name 值，我們可以利用這個特點進行跨域。

location.hash + iframe：a.html欲與c.html跨域相互通訊，通過中間頁b.html來實現。三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通訊。

document.domain + iframe：該方式只能用於二級網域名稱相同的情況下，比如 a.test.com 和 b.test.com 適用於該方式，我們只需要給頁面新增 document.domain =『test.com』表示二級網域名稱都相同就可以實現跨域，兩個頁面都通過js強制設定document.domain為基礎主域，就實現了同域

如何實現跨域？

如何實現跨域

什麼是跨域及如何實現跨域

內網如何實現跨域

如何實現跨域？

如何實現跨域

什麼是跨域及如何實現跨域

內網如何實現跨域

相關推薦