前後端分離開發部署的跨域問題

2021-08-20 08:10:08 字數 940 閱讀 4295

第一種:利用jsonp來解決跨域請求

這種方式本質上是利用html標籤的src屬性去實現,但這種方式有一定的侷限性。因為src載入資源是get請求,一些post請求無法實現,如上傳文。當然上傳檔案也可以通過base64編碼轉化成字串,然後再拼接到url上,但url長度是有限制的,所以一些大檔案是無法通過這種方式來解決

第二種:利用中介軟體(如nginx)進行****

如下圖:

這樣的話 對於瀏覽器來說,就是同乙個域,也就不存在跨域的問題了。當然如果**使用nginx的話,完全可以將靜態資源直接發布至nginx。

這種架構優勢在於 

1、開發的時候完全可以不考慮跨域的問題

2、流量有統一的入口,可以統一進行的流量管理

劣勢在於 : **伺服器流量壓力較大

第三種:通過設定響應頭資訊,解決跨域問題:

在跨域請求的時候,瀏覽器會先傳送乙個option請求,該option請求用於獲取目的資源所支援的通訊選項,所以可以針對option請求設定乙個過濾器,在過濾器中直接設定響應頭如下

public class crosfilter implements filter  

chain.dofilter(request, response);

} /**

* 為response設定header,實現跨域

}

前台頁面用ajax非同步請求的時候 注意要加上 xhrfields: 引數,因為非同步請求時js物件發起請求,預設情況是不儲存cookie的,加上這個引數,可以讓瀏覽器儲存cook

前後端分離開發中的跨域問題

在controller類上面新增 crossorigin,例如 出現的問題 你可以這樣理解,第一次請求 請求方式為options 的目的是測試介面是否能夠調通,後端不會給它返回任何的資料,而第二次請求才是真正的請求,然後響應頭中就會收到資料 解決跨域問題方案2 使用gateway閘道器來解決,直接在...

前後端分離跨域問題

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