面向微服務前後端分離的跨域問題

2022-06-14 10:39:10 字數 4163 閱讀 6587

我主要是通過cors解決的,它會在正式通訊之前,增加一次 http 查詢請求,稱為"預檢"請求,該請求是 option 方法的,通過該請求來知道服務端是否允許跨域請求。

下面是我解決問題時檢視的資料:

同源策略是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到 xss、csfr 等攻擊。所謂同源是指"協議+網域名稱+埠"三者相同,即便兩個不同的網域名稱指向同乙個 ip 位址,也非同源。

同源策略限制內容有:

但是有三個標籤是允許跨域載入資源:

``

// b.html

window.onmessage = function(e) 

websocket 是 html5 的乙個持久化的協議,它實現了瀏覽器與伺服器的全雙工通訊,同時也是跨域的一種解決方案。websocket 和 http 都是應用層協議,都基於 tcp 協議。但是 websocket 是一種雙向通訊協議,在建立連線之後,websocket 的 server 與 client 都能主動向對方傳送或接收資料。同時,websocket 在建立連線時需要借助 http 協議,連線建立好了之後 client 與 server 之間的雙向通訊就與 http 無關了。

原生 websocket api 使用起來不太方便,我們使用socket.io,它很好地封裝了 websocket 介面,提供了更簡單、靈活的介面,也對不支援 websocket 的瀏覽器提供了向下相容。

我們先來看個例子:本地檔案 socket.html 向localhost:3000發生資料和接受資料

// socket.html

實現原理:同源策略是瀏覽器需要遵循的標準,而如果是伺服器向伺服器請求就無需遵循同源策略。**伺服器,需要做以下幾個步驟:

我們先來看個例子:本地檔案 index.html 檔案,通過**伺服器http://localhost:3000向目標伺服器http://localhost:4000請求資料。

// index.html(

// server1.js **伺服器(http://localhost:3000)

// 第一步:接受客戶端請求

// 第二步:將請求**給伺服器

上述**經過兩次跨域,值得注意的是瀏覽器向**伺服器傳送請求,也遵循同源策略,最後在 index.html 檔案列印出

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

使用 nginx 反向**實現跨域,是最簡單的跨域方式。只需要修改 nginx 的配置即可解決跨域問題,支援所有瀏覽器,支援 session,不需要修改任何**,並且不會影響伺服器效能。

實現思路:通過 nginx 配置乙個**伺服器(網域名稱與 domain1 相同,埠不同)做跳板機,反向**訪問 domain2 介面,並且可以順便修改 cookie 中 domain 資訊,方便當前域 cookie 寫入,實現跨域登入。

// proxy伺服器

server 

}

最後通過命令列nginx -s reload啟動 nginx

// 前端開關:瀏覽器是否讀寫cookie

xhr.withcredentials = true;

// 訪問nginx中的**伺服器

window.name 屬性的獨特之處:name 值在不同的頁面(甚至不同網域名稱)載入後依舊存在,並且可以支援非常長的 name 值(2mb)。

其中 a.html 和 b.html 是同域的,都是http://localhost:3000;而 c.html 是http://localhost:4000

b.html 為中間**頁,與 a.html 同域,內容為空。

總結:通過 iframe 的 src 屬性由外域轉向本地域,跨域資料即由 iframe 的 window.name 從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制,但同時它又是安全操作。

實現原理: a.html 欲與 c.html 跨域相互通訊,通過中間頁 b.html 來實現。 三個頁面,不同域之間利用 iframe 的 location.hash 傳值,相同域之間直接 js 訪問來通訊。

具體實現步驟:一開始 a.html 給 c.html 傳乙個 hash 值,然後 c.html 收到 hash 值後,再把 hash 值傳遞給 b.html,最後 b.html 將結果放到 a.html 的 hash 值中。

同樣的,a.html 和 b.html 是同域的,都是http://localhost:3000;而 c.html 是http://localhost:4000

// a.html

// b.html

該方式只能用於二級網域名稱相同的情況下,比如 a.test.com 和 b.test.com 適用於該方式。只需要給頁面新增 document.domain ='test.com' 表示二級網域名稱都相同就可以實現跨域。

實現原理:兩個頁面都通過 js 強制設定 document.domain 為基礎主域,就實現了同域。

我們看個例子:頁面a.zf1.cn:3000/a.html獲取頁面b.zf1.cn:3000/b.html中 a 的值

// a.html

helloa

// b.html

hellob

前後端分離跨域問題

access to xmlhttprequest at localhost 8081 user gettoken?username hyly password hyly from origin http localhost 63342 has been blocked by cors policy ...

前後端分離跨域問題

public class loginhandlerinterceptor implements handlerinterceptor response.sendredirect request.getcontextpath login.html catch ioexception e return ...

前後端分離跨域問題總結

跨域問題一般是後端處理,前端只需要在請求時追加,一般就能解決跨域問題。後端 新增corsfilter過濾器,實現filter介面 跨域請求配置 override public void dofilter servletrequest servletrequest,servletresponse se...