爬山的蝸牛旅程：二、springboot配置靜态資源和跨域請求

學習springboot的旅程，就像蝸牛爬山，一點點的往上爬，一點點的欣賞旅途的風景

上一章 搭鍋起火,準備好環境了。現在，我們該開始煮美食了。

開始前，請思考一下

請求是不是可以歸類？（以下請求分類純屬個人見解！）

請求靜态資源：例如 圖檔，腳本檔案，樣式檔案等

請求資料：請求執行業務邏輯後傳回的狀态或結果資料，請求頁面展示資料等

請求視圖：請求頁面

現在都很流行前後分離了，這樣的背景下跨域是很常見的。

問題一：怎麼解決跨域請求？

問題二：假設你有靜态資源情況下，怎麼配置？

跨域請求設定

• 思路：寫個Filter攔截器，攔截所有請求，并設定跨域請求的範圍等
• 但是springboot怎麼搞？這裡就需要引入一個好玩的東西：CORS過濾器

CORS過濾器：實作了标準 javax.servlet.Filter 接口。它攔截傳入的HTTP請求，如果将它們辨別為跨域，則在将HTTP請求傳遞到實際目标（Servlet，JSP，靜态XML / HTML文檔）之前，将應用适當的CORS政策和标頭。

• 那怎麼用：
  • 第一步實作跨域邏輯
  • 第二步加入springboot攔截鍊（springmvc 支援 cors ，具體原理看這）
• 代碼實作：

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * Created by hxz+lh+chen 基礎配置
 */
@Configuration
public class WebMvcConfiguration{
    private final Logger logger = LoggerFactory.getLogger(this.getClass());
    
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /* 是否允許請求帶有驗證資訊 */
        corsConfiguration.setAllowCredentials(true);
        /* 允許通路的用戶端域名 */
        corsConfiguration.addAllowedOrigin("*");
        /* 允許服務端通路的用戶端請求頭 */
        corsConfiguration.addAllowedHeader("*");
        /* 允許通路的方法名,GET POST等 */
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}
           

這樣就實作了跨域請求設定了！

靜态資源配置

• 首先要知道，springboot的項目結構( springboot在resources 下提供了 存儲放靜态資源的static 檔案目錄)

  

• 問題來了，你怎麼設定靜态資源被加載的映射路徑？
• 代碼實作：

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * Created by hxz+lh+chen 基礎配置
 */
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
    private final Logger logger = LoggerFactory.getLogger(this.getClass());
    
    //配置spring-boot靜态資源映射路徑
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");
                //.setCachePeriod(31556926);//表示緩存的時間（秒）
    }
}

//-----------------------以下是頁面引用
<script src="/static/com/hxz/js/jquery-3.2.1.slim.min.js" ></script>
<link rel="stylesheet" href="/static/com/hxz/css/style.css">
           

到這裡就ok了！！！

那麼，接下來是思考一下，如果是前後不分離的情況，你要怎麼支援頁面開發？