怎么能學(xué)好Web前端開(kāi)發(fā),如何去解決JS跨域問(wèn)題

如何去解決JS跨域問(wèn)題?怎么能學(xué)好Web前端開(kāi)發(fā)?JavaScript跨域是指通過(guò)JS在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信,比如用ajax向一個(gè)不同的域請(qǐng)求數(shù)據(jù),或者通過(guò)JS獲取頁(yè)面中不同域的框架中(iframe)的數(shù)據(jù)。只要協(xié)議、域名、端口有任何一個(gè)不同,都被當(dāng)作是不同的域。那么如何解決跨域問(wèn)題呢?下面來(lái)看看吧。

在此之前,我們首先要了解為什么需要跨域??缬?,指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對(duì)JavaScript施加的安全限制。簡(jiǎn)單來(lái)說(shuō),跨域的作用就是讓你能訪問(wèn)不是一個(gè)域的文件。

要解決跨域問(wèn)題,我們可以使用以下幾種方法:

一、通過(guò)jsonp跨域(實(shí)際上是動(dòng)態(tài)創(chuàng)建script標(biāo)簽)

jsonp(json with Padding)是資料格式j(luò)son的一種“使用模式”,可以讓網(wǎng)頁(yè)從別的網(wǎng)域要資料。jsonp也叫填充式j(luò)son,是應(yīng)用json的一種新方法,只不過(guò)是被包含在函數(shù)調(diào)用中的json。jsonp由兩部分組成:回調(diào)函數(shù)和數(shù)據(jù)?;卣{(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù),而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的json數(shù)據(jù)。

二、通過(guò)document.domain+ iframe (只有在主域相同的時(shí)候才能使用該方法)

兩個(gè)不同域的a.html和b.html

解決辦法:在兩個(gè)頁(yè)面都插入document.domain,這樣就能訪問(wèn)iframe里window對(duì)象的各種屬性。

三、使用window.name來(lái)進(jìn)行跨域

原理:在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的,每個(gè)頁(yè)面對(duì)window.name都有讀寫(xiě)的權(quán)限

四、使用HTML5的window.postMessage方法來(lái)跨域傳送數(shù)據(jù)

五、利用CORS

CORS是自定義HTTP頭部,使瀏覽器和服務(wù)器對(duì)比,從而決定請(qǐng)求和響應(yīng)是否應(yīng)該進(jìn)行。

IE8使用XDR對(duì)象實(shí)現(xiàn)CORS,和XHR類似用法

現(xiàn)代瀏覽器使用普通的XMLHttpRequest對(duì)象請(qǐng)求就行。

小編推薦一個(gè)學(xué)Web前端的學(xué)習(xí)裙【 547,302,383 】,無(wú)論你是大牛還是小白,是想轉(zhuǎn)行還是想入行都可以來(lái)了解一起進(jìn)步一起學(xué)習(xí)!裙內(nèi)有開(kāi)發(fā)工具,很多干貨和技術(shù)資料分享!

當(dāng)然,實(shí)現(xiàn)JavaScript跨域的方法還有圖片Ping、利用flash等。跨域是前端最重要的面試題之一,掌握它你就比別人多了一個(gè)優(yōu)勢(shì)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 什么是跨域? 跨域一詞從字面意思看,就是跨域名嘛,但實(shí)際上跨域的范圍絕對(duì)不止那么狹隘。具體概念如下:只要協(xié)議...
    他在發(fā)呆閱讀 863評(píng)論 0 0
  • 作者:Qyouu鏈接:https://www.imooc.com/article/70123來(lái)源:慕課網(wǎng) 本文對(duì)原...
    六個(gè)周閱讀 1,331評(píng)論 0 14
  • 轉(zhuǎn)載自:https://segmentfault.com/a/1190000007326671bo 前端跨域整理 ...
    天字一等閱讀 524評(píng)論 0 3
  • 1. 孩子小的時(shí)候,我常給他洗澡。 孩子在澡盆里愉快地玩他的小船,嘴里配合著“嗚嗚”的聲音。 但是我發(fā)現(xiàn)他的船是底...
    能遼閱讀 505評(píng)論 2 8
  • 今天早晨想到一個(gè)問(wèn)題, 朋友不是特別親密的朋友的過(guò)生日,我想到了去祝福,去發(fā)紅包 當(dāng)時(shí)就沒(méi)有動(dòng)作,總是想等到晚上或...
    師師成長(zhǎng)記閱讀 151評(píng)論 0 0

友情鏈接更多精彩內(nèi)容