小編給大家分享一下如何解決JavaScript跨域的問(wèn)題，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司專(zhuān)注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋成都木制涼亭等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷(xiāo)售的產(chǎn)品，結(jié)合品牌形象的塑造，量身策劃品質(zhì)網(wǎng)站。

同源政策：協(xié)議、域名、端口均相同。

非同源限制：

cookie、localStorage、indexDB無(wú)法讀取。

DOM無(wú)法獲取。

AJAX請(qǐng)求無(wú)法發(fā)送。

解決方式：

一、JSONP

原理：通過(guò)動(dòng)態(tài)添加一個(gè)

頁(yè)面二："https://www.example.com/page2.html"    //接收頁(yè)面

事件接收window.addEventListener('message', function(){});中的message事件對(duì)象event有三個(gè)屬性：
1、event.source：發(fā)送消息的窗口
2、event.origin: 消息發(fā)向的網(wǎng)址
3、event.data: 消息內(nèi)容

三、iframe

iframe載入頁(yè)面和src里面的目標(biāo)域是同一個(gè)域，是能夠發(fā)起ajax請(qǐng)求（父子窗口）。   //前提是同源，不同源就不可以發(fā)起ajax請(qǐng)求。

不同窗口同源之間是可以獲取window對(duì)象，但是不能獲取window對(duì)象的屬性和方法。   //不同源會(huì)報(bào)錯(cuò)

1、document.domain + iframe（同源可用 -- 跨子域）

document.domain屬性：一級(jí)域名相同，二級(jí)域名不同可以實(shí)現(xiàn)window對(duì)象獲取。

頁(yè)面一："https://segmentfault.com/page1.html"

頁(yè)面二："https://segmentfault.com/page2.html"

缺陷：主域名得一致。

2、window.name + iframe（非同源可用）

window.name屬性：在一個(gè)窗口的生命周期內(nèi)，無(wú)論是否同源，同一個(gè)窗口的載入頁(yè)面window.name屬性是共享的，每個(gè)頁(yè)面都可以操作。

頁(yè)面一："https://segmentfault.com/page1.html"

頁(yè)面二："https://segmentfault.com/page2.html"

缺陷：兼容性不好

3、location.hash + iframe（非同源可用）

片段標(biāo)識(shí)符：片段標(biāo)識(shí)符是指url#號(hào)后面的部分。只是改變片段標(biāo)識(shí)符頁(yè)面不刷新。

頁(yè)面一："https://www.segmentfault.com/page1.html"

頁(yè)面二："https://www.example.com/page2.html#messgae"

頁(yè)面三："ttps:/www.segmentfault.com/page3html#somedata"

缺點(diǎn)：數(shù)據(jù)暴露在url，長(zhǎng)度也有限制。

四、WebSocket

WebSocket：瀏覽器通過(guò) JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請(qǐng)求，連接建立以后，客戶(hù)端和服務(wù)器端就可以通過(guò) TCP 連接直接交換數(shù)據(jù)。

設(shè)置WebSocket請(qǐng)求頭信息，服務(wù)器支持就可以進(jìn)行。

Origin: http://example.com        //根據(jù)域名是否在白名單內(nèi)來(lái)判斷是否可以通信

缺點(diǎn)：實(shí)現(xiàn)成本高。

五、CORS

cors是跨域資源分享?，F(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。

缺點(diǎn)：服務(wù)器配置，占用主域帶寬。

看完了這篇文章，相信你對(duì)如何解決JavaScript跨域的問(wèn)題有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！