SpringBoot配置Cors跨域請求

一、同源策略簡介

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

什么是源

源[origin]就是協議、域名和端口號。例如：http://www.baidu.com:80這個URL。

什么是同源

若地址里面的協議、域名和端口號均相同則屬於同源。

是否是同源的判斷

例如判斷下面的URL是否與 http://www.a.com/test/index.html 同源

• http://www.a.com/dir/page.html 同源
• http://www.child.a.com/test/index.html 不同源，域名不相同
• https://www.a.com/test/index.html 不同源，協議不相同
• http://www.a.com:8080/test/index.html 不同源，端口號不相同

哪些操作不受同源策略限制

1. 頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的；
2. 跨域資源的引入是可以的。但是JS不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。

跨域

受前面所講的瀏覽器同源策略的影響，不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象就需要跨域。 在同源策略的限制下，非同源的網站之間不能發送 AJAX 請求。

如何跨域

• 降域

  可以通過設置 document.damain='a.com'，瀏覽器就會認為它們都是同一個源。想要實現以上任意兩個頁面之間的通信，兩個頁面必須都設置documen.damain='a.com'。

• JSONP跨域

• CORS 跨域

二、CORS 簡介

為了解決瀏覽器同源問題，W3C 提出了跨源資源共享，即 CORS(Cross-Origin Resource Sharing)。

CORS 做到了如下兩點：

• 不破壞即有規則
• 服務器實現了 CORS 接口，就可以跨源通信

基於這兩點，CORS 將請求分為兩類：簡單請求和非簡單請求。

1、簡單請求

在CORS出現前，發送HTTP請求時在頭信息中不能包含任何自定義字段，且 HTTP 頭信息不超過以下幾個字段：

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

一個簡單的請求例子：

GET /test HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, sdch, br
Origin: http://www.examples.com
Host: www.examples.com

對於簡單請求，CORS的策略是請求時在請求頭中增加一個Origin字段，服務器收到請求后，根據該字段判斷是否允許該請求訪問。

1. 如果允許，則在 HTTP 頭信息中添加 Access-Control-Allow-Origin 字段，並返回正確的結果 ；
2. 如果不 允許，則不在 HTTP 頭信息中添加 Access-Control-Allow-Origin 字段 。

除了上面提到的 Access-Control-Allow-Origin ，還有幾個字段用於描述 CORS 返回結果 ：

1. Access-Control-Allow-Credentials： 可選，用戶是否可以發送、處理 cookie；
2. Access-Control-Expose-Headers：可選，可以讓用戶拿到的字段。有幾個字段無論設置與否都可以拿到的，包括：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 。

2、非簡單請求

對於非簡單請求的跨源請求，瀏覽器會在真實請求發出前，增加一次OPTION請求，稱為預檢請求(preflight request)。預檢請求將真實請求的信息，包括請求方法、自定義頭字段、源信息添加到 HTTP 頭信息字段中，詢問服務器是否允許這樣的操作。

例如一個DELETE請求：

OPTIONS /test HTTP/1.1
Origin: http://www.examples.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: X-Custom-Header
Host: www.examples.com

與 CORS 相關的字段有：

1. 請求使用的 HTTP 方法 Access-Control-Request-Method ；
2. 請求中包含的自定義頭字段 Access-Control-Request-Headers 。

服務器收到請求時，需要分別對 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 進行驗證，驗證通過后，會在返回 HTTP頭信息中添加 ：

Access-Control-Allow-Origin: http://www.examples.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

他們的含義分別是：

1. Access-Control-Allow-Methods: 真實請求允許的方法
2. Access-Control-Allow-Headers: 服務器允許使用的字段
3. Access-Control-Allow-Credentials: 是否允許用戶發送、處理 cookie
4. Access-Control-Max-Age: 預檢請求的有效期，單位為秒。有效期內，不會重復發送預檢請求

當預檢請求通過后，瀏覽器會發送真實請求到服務器。這就實現了跨源請求。

三、Spring Boot 配置 CORS

1、使用@CrossOrigin 注解實現

#如果想要對某一接口配置 CORS，可以在方法上添加 @CrossOrigin 注解 ：

@CrossOrigin(origins = {"http://localhost:9000", "null"})
@RequestMapping(value = "/test", method = RequestMethod.GET)
public String greetings() {
    return "{\"project\":\"just a test\"}";
}

#如果想對一系列接口添加 CORS 配置，可以在類上添加注解，對該類聲明所有接口都有效：

@CrossOrigin(origins = {"http://localhost:9000", "null"})
@RestController
@SpringBootApplication
public class SpringBootCorsTestApplication {
    
}

#如果想添加全局配置，則需要添加一個配置類 ：

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

另外，還可以通過添加 Filter 的方式，配置 CORS 規則，並手動指定對哪些接口有效。

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);   config.addAllowedOrigin("http://localhost:9000");
    config.addAllowedOrigin("null");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config); // CORS 配置對所有接口都有效
    FilterRegistrationBean bean = newFilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(0);
    return bean;
}

基於XML配置

<mvc:cors>
    <mvc:mapping path="/api/*" 
        allow-credentials="true"
        allowed-headers=""
        allowed-methods=""
        allowed-origins=""
        exposed-headers=""
        max-age="123"/>
</mvc:cors>

默認情況下，@CrossOrigin允許所有的來源，所有的Header，@RequestMapping注解中指定的HTTP方法被跨域訪問，並支持最大30分鍾的maxAge。 您可以覆蓋這些注解屬性值，以進行個性化設置:

屬性	說明
origins	允許的來源列表。響應信息會放在HTTP協議Header的Access-Control-Allow-Origin中 -*- 所有的來源都被允許 --- 如果未定義，則允許所有來源）
allowedHeaders	實際請求期間可以使用的請求頭列表。該值用於預檢的響應Header中的Access-Control-Allow-Headers信息。 -*- 意味着允許客戶端請求的所有頭信息。 --- 如果未定義，則允許所有請求的headers。
methods	服務器端支持的HTTP請求方法列表。 -*- 所有方法。 --- 如果未定義，則使用由RequestMapping注解定義的方法。
exposedHeaders	瀏覽器允許客戶端訪問的響應頭列表。 在實際響應報頭Access-Control-Expose-Headers中設置值。 –-- 如果未定義，則使用空的暴露標題列表。
allowCredentials	它確定瀏覽器是否應該包含與請求相關的任何cookie。 -false- 不允許包含Cookies 。 –true– 允許攜帶Cookies。 –""- (空字符串) 意味着未定義。 –-- 如果未定義，則允許所有憑據。
maxAge	預響應緩存持續時間的最大時間（以秒為單位）。 該值在Header的Access-Control-Max-Age中設置。 –-- 如果未定義, 最大時間設置為1800秒（30分鍾）