技術標籤：java前端

註明：

本文為學習記錄筆記，不喜勿噴。有問題請留言。

業務場景：前後端分離專案，解決前端訪問後臺介面報錯跨域；解決跨域訪問漏洞可能造成資訊洩露；解決PUT、DELETE等有安全問題的方法訪問請求

瀏覽器安全機制：前端訪問後臺的時候預設會先發一個不帶引數的options請求，如果options請求沒有通過的時候會直接報錯跨域訪問錯誤；前端請求的後臺地址跟前端部署的專案地址的域名（IP），埠，協議（http）不同時瀏覽器會直接報錯跨域訪問錯誤（瀏覽器console裡可以看到） blocked by CORS policy

解決方案：

1. 後臺響應頭（response header）新增一個Access-Control-Allow-Origin的header解決前端跨域訪問錯誤
2. 設定origin（request header origin欄位）白名單解決跨域訪問漏洞
3. 設定允許訪問的方法型別列表（值允許GET、POST、OPTIONS方法）解決高風險的訪問方法

後臺程式碼：此處使用spring自帶的跨域攔截器（org.springframework.web.filter.CorsFilter）去做處理

import org.springframework.beans.factory.annotation.Value;
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 java.util.Arrays;
import java.util.List;

/**
 * @author : HolidayLee
 * @description : 處理前端跨域請求以及解決跨域訪問漏洞
 */
@Configuration
public class CorsConfig {
    /**
     * 允許訪問的origin請求，即前端服務部署（tomcat）的地址列表/允許訪問後臺的地址，即白名單
     */
    @Value("#{'${COMMON_ALLOW_ORIGINS}'.split(';')}")
    private List<String> allowedOrigins;

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 允許訪問的origin請求，即前端服務部署（tomcat）的地址，即設定Access-Control-Allow-Origin
        config.setAllowedOrigins(allowedOrigins);
        // 可訪問的header
        config.addAllowedHeader("*");
        // 允許訪問的請求方法型別，此處禁用PUT、DELETE之類的有安全風險的方法訪問後臺可避免那些方法帶來的漏洞風險
        config.setAllowedMethods(Arrays.asList("GET", "POST", "OPTIONS"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}