一、關鍵詞

同源策略(same origin policy)：是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源

源：協議+域名+端口號

同源：協議、域名、端口號均相同

跨域：

?1. 非同源資源可以引入，但js不能讀寫加載的內容。如：嵌入到頁面的

?<script scr=”…”></script>,<img />,<link />,<iframe />

?2. 非同源的網站之間不能發送AJAX請求，需要跨域

CORS(Cross Origin Resource Sharing)：基于W3C規范，允許靈活的指定被授權的跨域請求

簡單請求：滿足以下兩個條件

?1. 請求方法：HEAD、GET、POST之一

?2. HTTP的頭信息不超出以下幾種字段：

 - Accept
 - Accept-Language
 - Content-Language
 - Last-Event-ID
 - Content-Type只限于[ application/x-www-form-urlencoded 、multipart/form-data、text/plain]

復雜請求：非簡單請求，實際上瀏覽器將發送兩個請求。先發送的是一種"預請求(OPTION)"，此時作為服務端，也需要返回"預回應"作為響應。預請求實際上是對服務端的一種權限請求，只有當預請求成功返回，實際請求才開始執行。

CORS解決簡單請求策略：在請求頭中增加一個Origin字段，服務器收到請求后，根據該字段是否允許該請求訪問。

?1. 允許，則在HTTP響應頭中添加

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:9090
Access-Control-Expose-Headers:X-Token

請求成功

?2. 不允許，則不添加，響應失敗，報跨域錯誤

請求失敗

CORS解決復雜請求策略：

?1. 預檢請求將真實請求的信息，包括請求方法、自定義頭字段、源信息添加到 HTTP 頭信息字段中，詢問服務器是否允許這樣的操作。服務器接收到預請求時，對Origin、Access-Control-Request-Method、Access-Control-Request-Headers 進行驗證，驗證通過后，會在返回HTTP頭信息中添加：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:POST,GET,PUT,OPTIONS,DELETE
Access-Control-Allow-Origin:http://localhost:9090
Access-Control-Max-Age:30000
Access-Control-Expose-Headers:X-Token

OPTIONS請求

?2. 預請求返回成功，執行實際請求

實際請求

二、SpringBoot整合CORS Filter配置跨域(不推薦)

?1. 添加依賴

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>

?2. 注冊過濾器

@Component
public class MyCorsFilter extends CORSFilter {

    public void init(FilterConfig filterConfig) {
        Properties props = new Properties();
        CORSConfiguration config = null;
        try {
            InputStream resourceAsStream = this.getClass().getClassLoader().getResourceAsStream("cors.properties");
            props.load(resourceAsStream);
            config = new CORSConfiguration(props);
        } catch (CORSConfigurationException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        this.setConfiguration(config);
    }

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        // 開啟cors過濾 ,默認開啟
        if (this.getConfiguration().allowGenericHttpRequests) {
            super.doFilter(request, response, chain);
        }else{
            // 未開啟cors過濾
            chain.doFilter(request, response);
        }
    }
}

?3.項目根目錄下添加配置文件(cors.properties)

文件常用配置：
# 開啟過濾
cors.allowGenericHttpRequests = true
# 過濾路徑
cors.allowOrigin = http://localhost:9090
# 允許cookie
cors.supportsCredentials = true
# 允許方法
cors.supportedMethods = GET, POST, HEAD, PUT, DELETE
# 允許請求頭
cors.supportedHeaders = *
# response顯示請求頭
#cors.exposedHeaders

詳細配置請參考：CORS Filter

三、SpringBoot使用自帶的配置跨域(Spring Framework 4.2版本以上)(推薦)

?1.Filter實現

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    /**
     * 基于Filter的全局配置
     * @return
     */
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(false);
        config.addAllowedOrigin("http://localhost:9090");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

?2.Servlet實現(實現粒度控制)

??2.1.全局配置

???2.1.1靜態配置

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    /**
     * 基于Servlet的全局配置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("POST","GET","PUT","DELETE")
            .maxAge(1800)
            .allowCredentials(true)
            .allowedHeaders("*")
            .exposedHeaders("L-TOKEN");
    }
}

???2.1.2配置文件配置

???配置實體類

?   @Component
public class CorsConfigBean {    @Value("${mycors.allowGenericHttpRequests:false}")
    private Boolean allowGenericHttpRequests;    @Value("${mycors.allowedOrigins:NULL}")
    private List<String> allowedOrigins;   @Value("${mycors.allowedMethods:POST,GET,PUT,OPTIONS,DELETE}")
    private List<String> allowedMethods;
    @Value("${mycors.maxAge:30000}")
    private Long maxAge;
@Value("${mycors.allowCredentials:false}")
    private boolean allowCredentials; 
    @Value("${mycors.allowedHeaders:}")
    private List<String> allowedHeaders;
    @Value("${mycors.exposedHeaders:}")
    private List<String> exposedHeaders;
    // getters/setters
}

???配置文件(application.properties中配置)

# 開啟跨域
mycors.allowGenericHttpRequests = true
# 過濾路徑
mycors.allowedOrigins = http://localhost:9090
# 允許cookie
mycors.allowCredentials = false
# 預請求緩存時間
# mycors.maxAge = 1800
# 允許方法
# mycors.allowedMethods = GET,POST
# 允許請求頭
mycors.allowedHeaders = *
# response顯示請求頭
mycors.exposedHeaders = X-Token

???配置類

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Autowired
    private CorsConfigBean corsConfigBean;

    /**
     * 基于Servlet的全局配置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 開啟跨域
        if (corsConfigBean.getAllowGenericHttpRequests()) {
            registry.addMapping("/**")
                    .allowedOrigins(corsConfigBean.getAllowedOrigins().toArray(new String[]{}))
                    .allowedMethods(corsConfigBean.getAllowedMethods().toArray(new String[]{}))
                    .maxAge(corsConfigBean.getMaxAge())
                    .allowCredentials(corsConfigBean.isAllowCredentials())
                    .allowedHeaders(corsConfigBean.getAllowedHeaders().toArray(new String[]{}))
                    .exposedHeaders(corsConfigBean.getExposedHeaders().toArray(new String[]{}));
        }else{
            super.addCorsMappings(registry);
        }
    }
}

??2.2.類配置

@RestController
@CrossOrigin(origins = {"http://localhost:9090"}) // 基于類的跨域控制
public class TestCorsController {

    @GetMapping("/testCors") 
    public String corsTest() {
        return "測試CORS簡單請求跨域方法";
    }
}

??2.3.方法配置

@RestController
public class TestCorsController {

    @GetMapping("/testCors")
    @CrossOrigin(origins = {"null", "http://localhost:9090"}, allowCredentials = "true")  // 基于方法的跨域控制
    public String corsTest() {
        return "測試CORS簡單請求跨域方法";
    }
}

四、總結

?1.全局配置

?可以使用Filter來進行統一配置

?2. 粒度控制

?使用Servlet配置，就近原則
?全局配置 < 類配置 < 方法配置

?3. 原理

??3.1請求頭

??請求頭中添加

??Origin

??3.2響應頭

??響應頭中添加：

??Access-Control-Allow-Credentials
??Access-Control-Allow-Origin
??Access-Control-Expose-Headers:X-Token
??Access-Control-Allow-Headers
??Access-Control-Allow-Methods
??Access-Control-Max-Age
??通過HTTP的Headers來判定跨域請求