先後端分離項目,引入Spring Cloud Gateway遇到的一個問題!

SpringBoot實戰電商項目mall(25k+star)地址:github.com/macrozheng/…前端

摘要

隨着項目架構的愈來愈複雜,引入了新的技術,新的問題也在產生,本文將講述一個因爲網關引發的前端調用問題。java

問題產生

個人mall項目升級到微服務架構之後,加入了基於Spring Cloud Gateway的網關係統,前端調用相關服務時應該統一從網關進行調用,本覺得前端直接調用網關沒啥問題,後來發現會產生沒法調用的狀況,下面咱們來記錄下這個問題以及解決思路。git

問題重現與解決

這裏咱們以mall-swarm中的代碼爲例來演示下該問題的產生與解決。github

  • 首先咱們先把mall-registrymall-configmall-gatewaymall-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服務後,發現已經能夠正常登陸了。

總結

當前端應用經過網關調用服務時會產生跨域問題,解決方法是在網關服務中進行全局跨域配置,同時相關服務中若是有跨域配置應該去除。架構

項目地址

github.com/macrozheng/…cors

公衆號

mall項目全套學習教程連載中,關注公衆號第一時間獲取。微服務

公衆號圖片
相關文章
相關標籤/搜索