精準解析 前後端分離 跨域問題

2021-08-02 10:36:20 字數 3177 閱讀 6312

提到跨域問題,我們就要了解一些瀏覽器的同源策略。

同源策略是乙個重要的安全策略,它用於限制乙個origin的文件或者它載入的指令碼如何能與另乙個源的資源進行互動。它能幫助阻隔惡意文件,減少可能被攻擊的媒介。

它定義了在 協議 / 主機名 / 埠號 都相同的情況下的請求才為同源請求:

url結果原因

同源

只有路徑不同

同源

只有路徑不同

失敗

協議不同

失敗

埠不同 (http://預設埠是80)

失敗

主機不同

我們在瀏覽器中登入**的時候,一般都是輸入一次密碼就好了,那是因為伺服器端在登入驗證完成之後,會在響應頭中加入乙個set-cookie,下次請求的時候,你http請求的頭字段中加入這個cookie,伺服器會自動識別使用者為驗證過的使用者,就無需再次輸入密碼驗證。

那麼問題來,如果你正在某行**(www.mouhang.com)查詢你的「鉅額資產」,正在這個時候,你多年未見的老同學給你來了個**(www.daohao.com),手賤的你沒有思考就點了下去。

點完你就會後悔了,同學一定是被盜號了!但是由於你像同學發的**傳送了乙個請求,在沒有同源策略的情況下,帶著你cookie的請求就傳送到了www.daohao.com的**上去,截獲了你的cookie的非法分子,通過這個請求就可以登入你的帳號了,你的「鉅額資產」不翼而飛。

沒錯,你遭受到了csrf攻擊;沒有瀏覽器的保護,作為小白的你很脆弱。

其實不是跨域就一定存在跨域問題。

這句話看起來很矛盾,其實是因為跨域問題主要是瀏覽器對ajax請求的一種限制,雖然給我帶了一些便,但是給我們帶來了安全。

前端:

jsonp,作為最早的解決方案,利用script標籤可以跨域的原理實現。

侷限:1、需要服務的支援   2、只能發起 get 請求

後端:

cors,規範化的跨域請求解決方案,安全可靠。

優勢:1、在伺服器端進行跨域控制,還可以自定義規則   2、支援各種請求方式

侷限:會產生額外的請求

nginx,通過反向**,將跨域請求轉換為非跨域請求

優勢:支援多種請求方式

侷限:需要在nginx上進行額外的配置,語義不清晰

jsonp

我作為乙個後端開發人員,就不給大家分享了。

cors

之前我寫過關於 spring boot 中通過 cros 解決跨域問題的文章:傳送門,其實在跨域請求的方法上加上corsorigin註解,也可以進行簡單的跨域。

nginx

傳送門瀏覽器會把ajax請求分為兩種:簡單請求和特殊請求

簡單請求:

請求方法是以下三種:head、get、post

http的頭資訊不超過以下幾種字段:accept、accept-language、cotent-language、last-event-id、content-type

當瀏覽器檢測到ajax的請求時簡單請求的時候,會在請求頭上加乙個字段 --->origin,origin中會指出當前請求屬於哪個域(協議+網域名稱+埠)。服務會根據這個值決定是否允許其跨域。

如果允許跨域;伺服器會在返回的響應頭中加入一下資訊:

伺服器要想操作cookie,需要滿足3個條件:

需要注意的是,cors需要瀏覽器和伺服器的支援,目前的話,貌似所有瀏覽器都支援該功能,瀏覽器的版本不能低於10

之前我寫過關於 spring boot 中通過 cros 解決跨域問題的文章:傳送門 ,其實我們也可以通過 在被跨域請求的方法上加上 @corsorigin 註解進行簡單的跨域操作。

特殊請求:

不符合簡單請求的條件,會被瀏覽器判定為特殊請求,,例如請求方式為put。

預檢請求

特殊請求會在正式通訊之前,增加一次http查詢請求,稱為"預檢"請求(preflight)。

瀏覽器先詢問伺服器,當前網頁所在的網域名稱是否在伺服器的許可名單之中,以及可以使用哪些http動詞和頭資訊字段。只有得到肯定答覆,瀏覽器才會發出正式的xmlhttprequest請求,否則就報錯。

預檢請求的樣板

user-agent: mozilla/5.0...伺服器對預檢請求進行檢測,如果可以跨域,會給客戶端乙個響應,響應樣板

content-type: text/plain簡做總結,如果不足,歡迎指出!

前後端分離跨域問題

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...