Spring MVC配置CORS（解決跨域請求）
1. CORS 簡介
同源策略（same origin policy）是瀏覽器安全的基石。在同源策略的限制下，非同源的網站之間不能傳送 ajax 請求的。
CORS 做到了兩點：
- 不破壞即有規則
- 伺服器實現了 CORS 介面，就可以跨源通訊
基於這兩點，CORS 將請求分為兩類：簡單請求和非簡單請求。
1.1 簡單請求
可以先看下 CORS 出現前的情況：跨源時能夠通過 script 或者 image 標籤觸發 GET 請求或通過表單傳送一條 POST 請求，但這兩種請求 HTTP 頭資訊中都不能包含任何自定義欄位。
簡單請求對應該規則，因此對簡單請求的定義為：
請求方法是 HEAD、GET 或 POST
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 欄位**，伺服器收到請求後，根據該欄位判斷是否允許該請求。
- 如果允許，則在 HTTP 頭資訊中新增
Access-Control-Allow-Origin欄位，並返回正確的結果 - 如果不允許，則不在頭資訊中新增
Access-Control-Allow-Origin欄位。
瀏覽器先於使用者得到返回結果，根據有無 Access-Control-Allow-Origin 欄位來決定是否攔截該返回結果。
對於 CORS 出現前的一些服務，CORS 對他們的影響分兩種情況：
- script 或者 image 觸發的 GET 請求不包含 Origin 頭，所以不受到 CORS 的限制，依舊可用。
- 如果是 ajax 請求，HTTP 頭資訊中會包含 Origin 欄位，由於伺服器沒有做任何配置，所以返回結果不會包含
Access-Control-Allow-Origin，因此返回結果會被瀏覽器攔截，介面依舊不可以被 ajax 跨源訪問。
可以看出，CORS 的出現，沒有對”舊的“服務造成任何影響。
另外，除了提到的 Access-Control-Allow-Origin 還有幾個欄位用於描述 CORS 返回結果：
- Access-Control-Allow-Credentials: 可選，使用者是否可以傳送、處理 cookie。
- Access-Control-Expose-Headers：可選，可以讓使用者拿到的欄位。有幾個欄位無論設定與否都可以拿到的，包括：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
1.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 相關的欄位有：
Access-Control-Request-Method: 真實請求使用的 HTTP 方法。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
他們的含義分別是：
- Access-Control-Allow-Methods: 真實請求允許的方法
- Access-Control-Allow-Headers: 伺服器允許使用的欄位
- Access-Control-Allow-Credentials: 是否允許使用者傳送、處理 cookie
- Access-Control-Max-Age: 預檢請求的有效期，單位為秒。有效期內，不會重複傳送預檢請求
當預檢請求通過後，瀏覽器會發送真實請求到伺服器。這就實現了跨源請求。
瞭解完 CORS，接下來我們來搭建簡單的 Spring MVC 服務，並進一步瞭解 Spring MVC 如何配置 CORS。
2. Spring MVC 環境搭建
開啟 http://start.spring.io/，新增 Web Dependency，然後選擇 Generate Project，下載 zip 檔案，就得到了一個 spring boot demo。
解壓 zip 檔案，雙擊 pom.xml 開啟或用 IDEA、Eclipse 將專案按照 maven 匯入。
根據 Group、Artifact、Dependencies 填寫的不同，專案目錄結構可能有些許差別，我的專案結構如下：
├── src
│ ├── main/java
│ | └── net/xiayule/spring/cors
│ | └── SpringBootCorsTestApplication.java
| └── resources
| ├── static
| ├── templates
| └── application.properties
|
└── pom.xml
我們需要關心的只有 SpringBootCorsTestApplication.java。在 SpringBootCorsTestApplication.java 新增以下程式碼：
@RestController
@SpringBootApplication
public class SpringBootCorsTestApplication {
@RequestMapping(value = "/test")
public String greetings() {
return "{\"project\":\"just a test\"}";
}
public static void main(String[] args) {
SpringApplication.run(SpringBootCorsTestApplication.class, args);
}
}
@RequestMapping(value = "/test") 的含義是該方法接受來自 /test 的請求，並且提供了對 HTTP 的 GET、POST、DELETE
等方法的支援。
執行專案的方法為，在專案根目錄執行 mvn spring-boot:run 啟動應用，開啟瀏覽器訪問 http://localhost:8080 即可看到效果：
後端服務搭建好了，接著實現前端。為了簡單，直接建立一個 test.html 檔案，新增以下內容：
<!DOCTYPE html>
<html>
<head>
<title>Hello CORS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/test",
method: "POST",
contentType: "application/json; charset=utf-8"
}).then(function(data, status, jqxhr) {
alert(data)
});
});
</script>
</head>
<body>
</body>
</html>
使用瀏覽器開啟該檔案，就會觸發一條向 http://localhost:8080 的請求。可以通過修改上面程式碼的 method，來觸發不同型別的請求。
由於是直接使用瀏覽器開啟，**網頁的源為 null**, 當向源 http://localhost:8080 請求時，就變成了跨源請求，因此如果後端不加 CORS 的配置，返回的 HTTP 頭資訊中不會包含 Access-Control-Allow-Origin，因此瀏覽器會報出如下錯誤：
3. 配置 CORS
一個應用可能會有多個 CORS 配置，並且可以設定每個 CORS 配置針對一個介面或一系列介面或者對所有介面生效。
舉例來說，我們需要：
- 讓 /test 介面支援跨源訪問，而 /test/1 或 /api 等其它介面不支援跨源訪問
- 讓 /test/* 這一類介面支援跨源訪問，而 /api 等其它介面不支援跨源訪問
- 站點所有的介面都支援跨源訪問
對第一種情況，如果想要對某一介面配置 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 {
// xxx
}
第三種情況，新增全域性配置，則需要新增一個配置類：
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:9000", "null")
.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;
}
4. 實現剖析
無論是通過哪種方式配置 CORS，其實都是在構造 CorsConfiguration。
一個 CORS 配置用一個 CorsConfiguration 類來表示，它的定義如下：
public class CorsConfiguration {
private List<String> allowedOrigins;
private List<String> allowedMethods;
private List<String> allowedHeaders;
private List<String> exposedHeaders;
private Boolean allowCredentials;
private Long maxAge;
}
Spring MVC 中對 CORS 規則的校驗，都是通過委託給 DefaultCorsProcessor 實現的。
DefaultCorsProcessor 處理過程如下：
- 判斷依據是 Header 中是否包含 Origin。如果包含則說明為 CORS 請求，轉到 2；否則，說明不是 CORS 請求，不作任何處理。
- 判斷 response 的 Header 是否已經包含 Access-Control-Allow-Origin，如果包含，證明已經被處理過了, 轉到 3，否則不再處理。
- 判斷是否同源，如果是則轉交給負責該請求的類處理
- 是否配置了 CORS 規則，如果沒有配置，且是預檢請求，則拒絕該請求，如果沒有配置，且不是預檢請求，則交給負責該請求的類處理。如果配置了，則對該請求進行校驗。
校驗就是根據 CorsConfiguration 這個類的配置進行判斷：
- 判斷 origin 是否合法
- 判斷 method 是否合法
- 判斷 header 是否合法
- 如果全部合法，則在 response header 中新增響應的欄位，並交給負責該請求的類處理，如果不合法，則拒絕該請求。
5. 總結
本文介紹了 CORS 的知識以及如何在 Spring MVC 中配置 CORS。