spring?cloud?Gateway如何處理跨域問(wèn)題
spring cloud Gateway處理跨域問(wèn)題
先簡(jiǎn)單描述一下架構(gòu),項(xiàng)目采用前后端分離的方式,前端是nodejs來(lái)搞layui(單頁(yè)版),后端采用spring cloud Alibaba,網(wǎng)關(guān)用的是spring cloud Gateway,然后出現(xiàn)了跨域問(wèn)題。
一開(kāi)始百度我以為只需要在Controller上加上@CrossOrigin就能搞定,后來(lái)發(fā)現(xiàn)出現(xiàn)了很多問(wèn)題。
問(wèn)題一
因?yàn)楹蠖诉€有網(wǎng)關(guān),所以如果你沒(méi)有自定的headers的頭信息那么是可以通過(guò) spring cloud Gateway ,但是如果有加自定義Headers,這樣就會(huì)被 spring cloud Gateway給攔截,說(shuō):跨域請(qǐng)求中沒(méi)有自定的header
錯(cuò)誤信息如下
考慮之后覺(jué)得應(yīng)該需要在spring cloud Gateway上添加跨域配置
添加方式有許多種,這里我寫出嘗試過(guò)可以用的兩種:
一在application.yml中添加配置
spring: application: name: nb-web cloud: nacos: discovery: server-addr: localhost:8848 gateway: globalcors: corsConfigurations: '[/**]': allowedHeaders: "*" allowedOrigins: "*" allowCredentials: true allowedMethods: - GET - POST - DELETE - PUT - OPTION
第二種再啟動(dòng)類上添加bean:
/** * 配置跨域 * @return */ @Bean public CorsWebFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); // cookie跨域 config.setAllowCredentials(Boolean.TRUE); config.addAllowedMethod("*"); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); // 配置前端js允許訪問(wèn)的自定義響應(yīng)頭 config.addExposedHeader("Authorization:"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser()); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); }
這樣就能解決自定義headers被攔截和跨域問(wèn)題,但是這樣配置緊接著下一個(gè)問(wèn)題又出來(lái)了
問(wèn)題二
由于跨域配置會(huì)進(jìn)行疊加,舉個(gè)例子你在服務(wù)一種添加了跨域配置,在spring cloud Gateway中也添加了,那這樣就會(huì)產(chǎn)生headers重復(fù)的問(wèn)題:
前端就會(huì)報(bào)錯(cuò),
所以你必須要進(jìn)行header去重,具體辦法如下:在spring cloud Gateway的過(guò)濾器中添加過(guò)濾配置
spring: application: name: nb-web cloud: nacos: discovery: server-addr: localhost:8848 gateway: default-filters: - DedupeResponseHeader=Vary Access-Control-Allow-Credentials Access-Control-Allow-Origin, RETAIN_UNIQUE - DedupeResponseHeader=Access-Control-Allow-Origin, RETAIN_FIRST
這樣就能把重復(fù)的header給去掉了
這樣跨域問(wèn)題基本就能解決了,但是因?yàn)槲疫@邊需要進(jìn)行session共享,所以需要給前端傳入cookie,那么問(wèn)題又來(lái)了,后端配置的cookie傳不出去
原因有兩個(gè)1:沒(méi)有加上headers上面加上Access-Control-Allow-Credentials: true,這個(gè)可以在
gateway: default-filters: - AddResponseHeader=Access-Control-Allow-Credentials,true
添加上,還有一個(gè)就是前端的ajax上沒(méi)有加上:
, xhrFields: {withCredentials: true} , crossDomain: true
這樣瀏覽器就能保存cookie
至此問(wèn)題就能解決了。在查閱過(guò)程中我看到關(guān)于跨域配置重復(fù)問(wèn)題是存在bug的,具體內(nèi)容可以參考:
http://www.dbjr.com.cn/program/319980elx.htm
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Java同步鎖Synchronized底層源碼和原理剖析(推薦)
這篇文章主要介紹了Java同步鎖Synchronized底層源碼和原理剖析,釋放后,進(jìn)入減減操作、直到為0然后喚醒隊(duì)列,讓他們?nèi)?zhēng)奪鎖,循環(huán)前面步驟,對(duì)Java同步鎖Synchronized相關(guān)知識(shí)感興趣的朋友一起看看吧2022-05-05MyBatis框架搭建時(shí)依賴包引入異常的問(wèn)題解決
在使用IDEA環(huán)境搭建MyBatis框架時(shí),可能會(huì)因?yàn)橐蕾嚢姹具^(guò)低導(dǎo)致兼容性問(wèn)題,本文就來(lái)介紹一下MyBatis框架搭建時(shí)依賴包引入異常的問(wèn)題解決,感興趣的可以來(lái)了解一下2024-10-10Java實(shí)戰(zhàn)之在線寄查快遞系統(tǒng)的實(shí)現(xiàn)
這篇文章主要介紹了如何利用Java制作一個(gè)在線寄查快遞系統(tǒng),文中采用的技術(shù)有java、SpringBoot、FreeMarker、Mysql,需要的可以參考一下2022-02-022024.1.2 安裝JDK和Eclipse并配置java編譯環(huán)境的過(guò)程
這篇文章主要介紹了2024.1.2 安裝JDK和Eclipse并配置java編譯環(huán)境,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01SpringBoot2.7.14整合redis7的詳細(xì)過(guò)程
這篇文章主要介紹了SpringBoot2.7.14整合redis7的詳細(xì)過(guò)程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10SpringBoot項(xiàng)目中獲取IP地址的實(shí)現(xiàn)示例
OkHttp是一個(gè)由Square開(kāi)發(fā)的高效、現(xiàn)代的HTTP客戶端庫(kù),本文主要介紹了SpringBoot項(xiàng)目中獲取IP地址的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08Springcloud服務(wù)注冊(cè)consul客戶端過(guò)程解析
這篇文章主要介紹了Springcloud服務(wù)注冊(cè)consul客戶端過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08