前端解決跨域問題的常用方法

2021-10-01 03:53:40 字數 1632 閱讀 6707

首先,跨域是什麼?

只要協議、網域名稱、埠有任何乙個不同,都被當作是不同的域。為什麼三者任何乙個不同就會產生跨域呢,想想也很容易知道,要是很隨便引用什麼外部檔案,不同標籤下的頁面引用類似的彼此的檔案,瀏覽器很容易懵逼的,保障不了安全問題,但在安全限制的同時也給注入iframe或是ajax請求上帶來了不少麻煩。所以我們要通過一些方法使本域的js能夠操作其他域的頁面物件或者使其他域的js能操作本域的頁面物件

但有兩點至少要清楚:

1.通過html5的postmessage方法跨域

頁面m通過postmessage方法傳送訊息如下:

window.onload = function() ;
備註:

postmessage的使用方法:

頁面n通過message事件監聽並接受訊息如下:

let onmessage = function (event)   

};

if (typeof window.addeventlistener != 'undefined') else if (typeof window.attachevent != 'undefined')

或者為了防止接入方的命名衝突,也可以約定事件名,以此加以區分

例如

window.addeventlistener("message", function(event)  });
2.通過jsonp上面那種方式的通訊是雙向的,頁面與iframe或是頁面與頁面之間的

jsonp主要是封裝好的請求方式新增callback,這個callback是由前後端約定好的

它的優劣勢:

3.cors跨域

實現cors通訊的關鍵是伺服器端,只要服務端那邊實現了cors介面,就可以跨源通訊

cors(cross-origin resource sharing)跨域資源共享,定義了必須在訪問跨域資源時,瀏覽器與伺服器應該如何溝通。cors背後的基本思想就是使用自定義的http頭部讓瀏覽器與伺服器進行溝通,從而決定請求或響應是應該成功還是失敗。目前,所有瀏覽器都支援該功能,ie瀏覽器不能低於ie10。整個cors通訊過程,都是瀏覽器自動完成,不需要使用者參與。對於開發者來說,cors通訊與同源的ajax通訊沒有差別,**完全一樣。瀏覽器一旦發現ajax請求跨源,就會自動新增一些附加的頭資訊,有時還會多出一次附加的請求,但使用者不會有感覺

伺服器端對於cors的支援,主要就是通過設定access-control-allow-origin來進行的。如果瀏覽器檢測到相應的設定,便可以允許ajax進行跨域的訪問

cors與jsonp相比,顯然更為先進、方便和可靠。

4.設定**

目前市場上用vue技術不在少數,下面介紹一種配置**方式

在vue.config.js該檔案裡面配置如下:

devserver: }}

}

後面請求是需要帶上『/api』請求即可

前端解決跨域問題

跨域請求概念請見 用 disable web security解決跨域。1 當本地進行頁面除錯時,可以在intellij idea 設定 settings tools web browsers 選擇grome瀏覽器進行編輯,輸入 args disable web security user data...

前端解決跨域的方法

什麼事跨域?跨域就是 當乙個請求url的協議 網域名稱 埠三者之間任意乙個與當前頁面url不同即為跨域,跨域一般會報錯 跨域有兩種解決方法 方法一 access control allow origin 這個是在伺服器 裡面寫的,內容大致為是否允許跨域,那些東西允許跨域 let express re...

ajax解決跨域問題的常用方法

前端ajax請求時,使用 jsonp 方式訪問介面。原理為 瀏覽器允許有 src 屬性的標籤跨域請求,因此通過後台返回 script 文字包裹 json 資料的方式,實現跨域訪問。請求 request headers 和 response headers 示例 服務端寫法 test method r...