常用的幾種跨域方法 簡介

2022-07-25 03:30:09 字數 2164 閱讀 6152

同源策略是瀏覽器最基本的安全功能。

通常網域名稱是由以下幾部分組成:

協議         網域名稱              埠號          hash、查詢字串、檔名等

同源策略會限制以下的內容:

1,cookie、localstorage和indexdb無法讀取

2,dom無法獲得

3,ajax傳送後會被瀏覽器攔截

不過有些標籤是可以允許跨域載入的:

1,img 標籤

2,link  標籤

3,script 檔案

當協議、網域名稱、埠號任意乙個不相同時,都算作不同域。不同域之間請求資源,就是跨域。

如果是協議和埠號造成的跨域,前端是無法解決的。

在跨域的問題上,是通過 『url首部』來識別而不會根據網域名稱對應的ip位址是否相同來判斷。 url首部可以理解為『協議、網域名稱和埠必須匹配』。

跨域並不是http請求傳送不出去,請求可以發出去,服務端也能接受並正常返回結果,只是結果被瀏覽器攔截了。

因為跨域本身是為了阻止使用者獲取不同域下的內容。所以表單提交這種方式是可以發起跨域請求的,因為表單只會提交不會獲取新內容。

因為在頁面上呼叫script標籤沒有跨域的限制(不僅如此,凡是擁有src屬性的標籤都具有跨域的能力)。

首先在本頁面宣告乙個用來獲取資料的**函式, 建立乙個script標籤,將要跨域的位址加上該**函式賦值給script的src屬性(通過 ?callback= fn)

伺服器接收到該請求後,會在返回的檔案中 將該**函式名和資料拼接起來,返回給客戶端。客戶端執行該**函式,就可以獲取到服務端傳過來的資料。

jsonp的相容性很好,但是僅僅只支援get請求。

cors需要瀏覽器和後台同時支援。 ie8和ie9需要通過xdomainrequest實現

瀏覽器會自動進行cors通訊,所以只要後台實現了cros,就實現了跨域。

服務端設定access-control-allow-origin就可以開啟cors,該屬性表示哪些網域名稱可以訪問資源。

在使用cors傳送請求時,會出現兩種情況:

簡單請求: 

只要同時滿足以下兩種條件就屬於簡單請求

條件1:   使用get 、head、post方法

複雜請求: 

不符合簡單請求的就屬於複雜請求。 複雜請求的cors會在正式請求之前增加一次http查詢請求(預檢請求),該請求是option方法,通過該請求來知道服務端是否允許跨域請求。

xmlhttprequest level 2的api,可以解決以下的問題:

頁面和其開啟的新視窗的資料傳遞

多視窗之間訊息傳遞

頁面和巢狀的iframe訊息傳遞

以上三個場景的跨域資料傳遞

postmessage方法允許來自不同源的指令碼採用非同步方式進行有限的通訊。

otherwindow.postmessage(message,targetorigin,[transfer]);

message: 要傳送的資料

targetorigin:通過視窗的origin屬性來指定哪些視窗能接收到訊息,只有目標視窗的協議、網域名稱和埠都和提供的targetorigin匹配的時候,才會被傳送。 

transfer: 和message同時傳遞的transferable物件,這些物件的所有權將被轉移給訊息的接收方,傳送方不再保有所有權。

h5的乙個持久化協議。實現了瀏覽器和伺服器的全雙工通訊,同時也是跨域的一種解決方案。

websocket和http都是應用層協議,都基於tcp。但是websocket是一種雙向通訊協議,一旦連線建立,服務端和客戶端都可以向對方傳送或接收資料。

websocket建立的時候需要用到http協議,建立好連線之後就與http無關了。

同源策略是瀏覽器需要遵循的標準,而如果服務端向服務端請求就無需遵循同源策略。

**伺服器接收瀏覽器的請求,處理後**給伺服器,收到伺服器的響應後再**給瀏覽器。

需要注意的是**伺服器和瀏覽器之間也遵循同源策略。

類似node中介軟體**,需要搭建乙個中轉nginx伺服器,用於**請求。

最簡單的跨域方式。只要修改nginx的配置即可解決跨域問題。

還有一些不常用的奇淫技巧,就不寫了。 一般用的最多的就是cors和nginx反向**。

幾種跨域的方法

完整的http請求過程 1 建立tcp連線 2 web瀏覽器向web伺服器傳送請求命令 3 web瀏覽器傳送請求頭資訊 頭資訊 客服端環境資訊,身份驗證資訊等 4 web伺服器應答 5 web伺服器傳送應答頭資訊 6 web伺服器向瀏覽器傳送資料 7 web伺服器關閉tcp連線 跨域的幾種常用方法 ...

前端跨域的幾種方法

前段的跨域同源策略是什麼呢?同源指的是三個同源 1,協議相同,網域名稱相同,埠相同,例如這些 協議是http 網域名稱是172.0.0.1 埠號是8080,在這三個都相同的話就是同源,如果不相同,就存在了跨域.一.jsonp跨域請求 首先我們要知道,jsonp跨域的原理是什麼呢,我們的ajax請求會...

什麼是跨域及常用的幾種跨域解決方案

什麼是跨域?瀏覽器從乙個網域名稱的網頁去請求另乙個網域名稱的資源時,網域名稱 埠 協議任一不同,都是跨域。跨域並不是請求發不出去,請求能發出去,服務端能收到請求並正常返回結果,只是結果被瀏覽器攔截了。這是由於瀏覽器的同源策略而導致的,同源策略限制了不同源之間的資源進行互動,用於隔離潛在的惡意檔案的安...