SpringBoot實戰電商項目mall(25k+star)地址:github.com/macrozheng/…前端
隨着項目架構的愈來愈複雜,引入了新的技術,新的問題也在產生,本文將講述一個因爲網關引發的前端調用問題。java
個人mall
項目升級到微服務架構之後,加入了基於Spring Cloud Gateway的網關係統,前端調用相關服務時應該統一從網關進行調用,本覺得前端直接調用網關沒啥問題,後來發現會產生沒法調用的狀況,下面咱們來記錄下這個問題以及解決思路。git
這裏咱們以
mall-swarm
中的代碼爲例來演示下該問題的產生與解決。github
首先咱們先把mall-registry
、mall-config
、mall-gateway
、mall-admin
這些服務依次啓動起來;web
再啓動前端項目mall-admin-web
;跨域
訪問登陸頁面進行登陸操做,發現沒法登陸,OPTIONS
請求返回狀態碼403
,到此咱們還看不來是啥問題;cookie
Console
來看看到底報了啥錯,發現了CORS
這個關鍵信息,能夠肯定是產生了跨域問題,網關沒有支持跨域;mall-gateway
中添加全局跨域配置便可:/** * 全局跨域配置 * 注意:前端從網關進行調用時須要配置 * Created by macro on 2019/7/27. */
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsWebFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedMethod("*");
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
source.registerCorsConfiguration("/**", config);
return new CorsWebFilter(source);
}
}
複製代碼
mall-gateway
服務,再次進行登陸操做,發現OPTIONS
請求雖然經過了,可是POST
請求在Console
中卻報錯了:mall-admin
服務中重複設置了容許跨域的過濾器的問題,只要去除mall-admin
的全局跨域配置便可;/** * 全局跨域配置 * 注意:前端從網關進行調用時不須要配置 * Created by macro on 2019/7/27. */
//@Configuration
public class GlobalCorsConfig {
/** * 容許跨域調用的過濾器 */
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//容許全部域名進行跨域調用
config.addAllowedOrigin("*");
//容許跨愈加送cookie
config.setAllowCredentials(true);
//放行所有原始頭信息
config.addAllowedHeader("*");
//容許全部請求方法跨域調用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
複製代碼
mall-admin
服務後,發現已經能夠正常登陸了。當前端應用經過網關調用服務時會產生跨域問題,解決方法是在網關服務中進行全局跨域配置,同時相關服務中若是有跨域配置應該去除。架構
mall項目全套學習教程連載中,關注公衆號第一時間獲取。微服務