如何去解決JS跨域問題 怎麼能學好Web前端開發

智雲程式設計發表於2019-09-25

如何去解決JS跨域問題?怎麼能學好Web前端開發?JavaScript跨域是指通過JS在不同的域之間進行資料傳輸或通訊,比如用ajax向一個不同的域請求資料,或者通過JS獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同,都被當作是不同的域。那麼如何解決跨域問題呢?下面來看看吧。

在此之前,我們首先要了解為什麼需要跨域。跨域,指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript施加的安全限制。簡單來說,跨域的作用就是讓你能訪問不是一個域的檔案。

如何去解決JS跨域問題 怎麼能學好Web前端開發

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

一、通過jsonp跨域(實際上是動態建立script標籤)

jsonp(json with Padding)是資料格式json的一種“使用模式”,可以讓網頁從別的網域要資料。jsonp也叫填充式json,是應用json的一種新方法,只不過是被包含在函式呼叫中的json。jsonp由兩部分組成:回撥函式和資料。回撥函式是當響應到來時應該在頁面中呼叫的函式,而資料就是傳入回撥函式中的json資料。

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

兩個不同域的a.html和b.html

解決辦法:在兩個頁面都插入document.domain,這樣就能訪問iframe裡window物件的各種屬性。

三、使用window.name來進行跨域

原理:在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name的,每個頁面對window.name都有讀寫的許可權

四、使用HTML5的window.postMessage方法來跨域傳送資料

五、利用CORS

CORS是自定義HTTP頭部,使瀏覽器和伺服器對比,從而決定請求和響應是否應該進行。

IE8使用XDR物件實現CORS,和XHR類似用法

現代瀏覽器使用普通的XMLHttpRequest物件請求就行。

當然,實現JavaScript跨域的方法還有圖片Ping、利用flash等。跨域是前端最重要的面試題之一,掌握它你就比別人多了一個優勢,如果你想學好Web前端開發,建議參加專業的學習方式。

這裡推薦一下我的前端學習交流扣qun:784783012 ,裡面都是學習前端的,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴。2019最新技術,從企業招聘人才需求 到怎麼學習前端開發,和學習什麼內容都有免費系統分享。好友都在裡面學習交流,每天都會有大牛定時講解前端技術!

點選: 加入


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2658227/,如需轉載,請註明出處,否則將追究法律責任。

相關文章