前端面試筆記14:跨域問題的解决

勿忘*初心 2022-01-08 03:25:04 阅读数:313

前端 端面 解决

跨域問題的解决


當兩個 URL 的協議、端口號和主機至少有一個不一致的時候,如果想讓這兩個源的資源進行交互,就需要用到跨域的技術了。

那麼哪些技術可以解决跨域問題呢?

解决跨域的方法我們可以根據我們想要實現的目的來劃分。

實現主域名下不同的子域名的跨域操作

document.domain

我們可以使用設置 document.domain 來解决。

document.domain 設置為主域名,來實現相同子域名的跨域操作,這個時候主域名下的 cookie 就能够被子域名所訪問。同時如果文檔中含有主域名相同,子域名不同的 iframe 的話,我們也可以對這個 iframe 進行操作。

解决不同跨域窗口間的通信問題

如果是想要解决不同跨域窗口間的通信問題,比如說一個頁面想要和頁面中的不同源的 iframe 進行通信的問題,我們可以使用 location.hash 或者 window.name 或者 postMessage 來解决。

location.hash

使用 location.hash 的方法,我們可以在主頁動態的修改 iframe 窗口的 hash 值,然後在 iframe 窗口裏實現監聽函數來實現這樣一個單向的通信。因為在 iframe 是沒有辦法訪問到不同源的父級窗口的,所以我們不能直接修改父級窗口的 hash 值來實現通信,我們可以在 iframe 中再加一個 iframe,這個 iframe 的內容是和父級頁面同源的,所以我們使用 window.parent.parent 來修改最頂級頁面的 src ,以此來實現雙向通信。

window.name

使用 window.name 的方法,主要是基於同一個窗口中設置了 window.name 後不同源的頁面也可以訪問,所以不同源的子頁面可以首先在 window.name 中寫入數據,然後跳轉到一個和父級同源的頁面。這個時候父級頁面就可以訪問同源的子頁面中的 window.name 中的數據了,這種方式的好處是可以傳輸的數據量大。

postMessage

使用 postMessage 來解决的辦法,這是一個 H5 中新增的一個 api。通過它我們可以實現多窗口間的信息傳遞,通過獲取到指定窗口的引用,然後調用 postMessage 來發送信息,在窗口中我們通過對 message 信息的監聽來接收信息,以此來實現不同源間的信息交換。

解决無法提交跨域請求的問題

如果是像解决 ajax 無法提交跨域請求的問題,我們可以使用 jsonpCORSwebsocket 協議,服務器代理來解决問題。

JSONP

使用 jsonp 來實現跨域請求,它的主要原理是通過動態構建 script 標簽來實現跨域請求,因為瀏覽器對 script 標簽的引入沒有跨域的訪問限制。通過在請求的 url 後指定一個回調函數,然後服務器在返回數據的時候,構建一個 json 數據的包裝,這個包裝就是回調函數,然後返回給前端,前端接收到數據後,因為請求的是脚本文件,所以會直接執行,這樣我們先前定義好的回調函數就可以被調用,從而實現了跨域請求的處理。這種方式只能用於 get 請求

CORS

使用 CORS 的方式,CORS 是一個 W3C 標准,全稱是**“跨域資源共享”**。CORS 需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持 CORS 請求。

具體來說,就是會在頭信息之中,增加一個 Origin 字段。Origin 字段用來說明本次請求來自哪個源。服務器根據這個值,决定是否同意這次請求。對於如果 Origin 指定的源,不在許可範圍內,服務器會返回一個正常的 HTTP 回應。瀏覽器發現,這個回應的頭信息沒有包含 Access-Control-Allow-Origin 字段,就知道出錯了,從而拋出了一個錯誤, ajax 不會收到響應信息。如果成功的話會包含一些以 Access-Control- 開頭的字段。

非簡單請求,瀏覽器會先發出一次預檢請求,來判斷該域名是否在服務器的白名單中,如果收到肯定回複後才會發起請求。

WebSocket

使用 webSocket 協議,這個協議沒有同源限制。

服務器代理

使用服務器來代理跨域的訪問請求,就是有跨域的請求操作時發送給後端,讓後端代為請求,然後最後將獲取的結果返回。

版权声明:本文为[勿忘*初心]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080325037909.html