• 推薦閱讀：
• 
  
• 
  

摘要

隨著項目架構的越來越複雜，引入了新的技術，新的問題也在產生，本文將講述一個由於網關引起的前端調用問題。

問題產生

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

問題重現與解決

這裡我們以mall-swarm中的代碼為例來演示下該問題的產生與解決。

• 首先我們先把mall-registry、mall-config、mall-gateway、mall-admin這些服務依次啟動起來；
• 再啟動前端項目mall-admin-web；
• 訪問登錄頁面進行登錄操作，發現無法登錄，OPTIONS請求返回狀態碼403，到此我們還看不來是啥問題；

• 我們點開Console來看看到底報了啥錯，發現了CORS這個關鍵信息，可以確定是產生了跨域問題，網關沒有支持跨域；

• 接下來只要讓網關支持跨域就可以了，在mall-gateway中添加全局跨域配置即可：

<code>/**
 * 全局跨域配置
 * 注意：前端從網關進行調用時需要配置
 * 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);
    }

}/<code>

• 重啟mall-gateway服務，再次進行登錄操作，發現OPTIONS請求雖然通過了，但是POST請求在Console中卻報錯了：

• 分析下該問題，應該是mall-admin服務中重複設置了允許跨域的過濾器的問題，只要去除mall-admin的全局跨域配置即可；

<code>/**
 * 全局跨域配置
 * 注意：前端從網關進行調用時不需要配置
 * 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);
    }
}/<code>

• 重新啟動mall-admin服務後，發現已經可以正常登錄了。

總結

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

作者：MacroZheng
原文鏈接：https://juejin.im/post/5e13248e5188253ab849d125

閱讀更多 追逐仰望星空 的文章

關鍵字: 美好，一直在身邊 答對 集錦