1. CORS 簡(jiǎn)介

同源策略（same origin policy）是瀏覽器安全的基石。在同源策略的限制下，非同源的網(wǎng)站之間不能發(fā)送 ajax 請(qǐng)求的。

為了解決這個(gè)問題，w3c 提出了跨源資源共享，即 CORS(Cross-Origin Resource Sharing)。

CORS 做到了兩點(diǎn)：

1. 不破壞即有規(guī)則
2. 服務(wù)器實(shí)現(xiàn)了 CORS 接口，就可以跨源通信

基于這兩點(diǎn)，CORS 將請(qǐng)求分為兩類：簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。

1.1 簡(jiǎn)單請(qǐng)求

可以先看下 CORS 出現(xiàn)前的情況：跨源時(shí)能夠通過(guò) script 或者 image 標(biāo)簽觸發(fā) GET 請(qǐng)求或通過(guò)表單發(fā)送一條 POST 請(qǐng)求，但這兩種請(qǐng)求 HTTP 頭信息中都不能包含任何自定義字段。

簡(jiǎn)單請(qǐng)求對(duì)應(yīng)該規(guī)則，因此對(duì)簡(jiǎn)單請(qǐng)求的定義為：

請(qǐng)求方法是 HEAD、GET 或 POST 且 HTTP 頭信息不超過(guò)以下幾個(gè)字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（只限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）。

比如有一個(gè)簡(jiǎn)單請(qǐng)求：

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

對(duì)于這樣的簡(jiǎn)單請(qǐng)求，CORS 的策略是請(qǐng)求時(shí)，**在頭信息中添加一個(gè) Origin 字段**，服務(wù)器收到請(qǐng)求后，根據(jù)該字段判斷是否允許該請(qǐng)求。

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

瀏覽器先于用戶得到返回結(jié)果，根據(jù)有無(wú) Access-Control-Allow-Origin 字段來(lái)決定是否攔截該返回結(jié)果。

對(duì)于 CORS 出現(xiàn)前的一些服務(wù)，CORS 對(duì)他們的影響分兩種情況：

1. script 或者 image 觸發(fā)的 GET 請(qǐng)求不包含 Origin 頭，所以不受到 CORS 的限制，依舊可用。
2. 如果是 ajax 請(qǐng)求，HTTP 頭信息中會(huì)包含 Origin 字段，由于服務(wù)器沒有做任何配置，所以返回結(jié)果不會(huì)包含 Access-Control-Allow-Origin，因此返回結(jié)果會(huì)被瀏覽器攔截，接口依舊不可以被 ajax 跨源訪問。

可以看出，CORS 的出現(xiàn)，沒有對(duì)”舊的“服務(wù)造成任何影響。

另外，除了提到的 Access-Control-Allow-Origin 還有幾個(gè)字段用于描述 CORS 返回結(jié)果：

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

1.2 非簡(jiǎn)單請(qǐng)求

除了簡(jiǎn)單請(qǐng)求之外的請(qǐng)求，就是非簡(jiǎn)單請(qǐng)求。

對(duì)于非簡(jiǎn)單請(qǐng)求的跨源請(qǐng)求，**瀏覽器會(huì)在真實(shí)請(qǐng)求發(fā)出前**，增加一次 OPTION 請(qǐng)求，稱為預(yù)檢請(qǐng)求（preflight request）。預(yù)檢請(qǐng)求將真實(shí)請(qǐng)求的信息，包括請(qǐng)求方法、自定義頭字段、源信息添加到 HTTP 頭信息字段中，詢問服務(wù)器是否允許這樣的操作。

比如對(duì)于 DELETE 請(qǐng)求：

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 相關(guān)的字段有：

1. Access-Control-Request-Method: 真實(shí)請(qǐng)求使用的 HTTP 方法。
2. Access-Control-Request-Headers: 真實(shí)請(qǐng)求中包含的自定義頭字段。

服務(wù)器收到請(qǐng)求時(shí)，需要分別對(duì) Origin、Access-Control-Request-Method、Access-Control-Request-Headers 進(jìn)行驗(yàn)證，驗(yàn)證通過(guò)后，會(huì)在返回 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: 真實(shí)請(qǐng)求允許的方法
2. Access-Control-Allow-Headers: 服務(wù)器允許使用的字段
3. Access-Control-Allow-Credentials: 是否允許用戶發(fā)送、處理 cookie
4. Access-Control-Max-Age: 預(yù)檢請(qǐng)求的有效期，單位為秒。有效期內(nèi)，不會(huì)重復(fù)發(fā)送預(yù)檢請(qǐng)求
   

當(dāng)預(yù)檢請(qǐng)求通過(guò)后，瀏覽器會(huì)發(fā)送真實(shí)請(qǐng)求到服務(wù)器。這就實(shí)現(xiàn)了跨源請(qǐng)求。

了解完 CORS，接下來(lái)我們來(lái)搭建簡(jiǎn)單的 Spring MVC 服務(wù)，并進(jìn)一步了解 Spring MVC 如何配置 CORS。

2. Spring MVC 環(huán)境搭建

打開 http://start.spring.io/，添加 Web Dependency，然后選擇 Generate Project，下載 zip 文件，就得到了一個(gè) spring boot demo。

解壓 zip 文件，雙擊 pom.xml 打開或用 IDEA、Eclipse 將項(xiàng)目按照 maven 導(dǎo)入。

根據(jù) Group、Artifact、Dependencies 填寫的不同，項(xiàng)目目錄結(jié)構(gòu)可能有些許差別，我的項(xiàng)目結(jié)構(gòu)如下：

├── src
│  ├── main/java
│  |    └── net/xiayule/spring/cors
│  |      └── SpringBootCorsTestApplication.java
|  └── resources
|    ├── static
|    ├── templates
|    └── application.properties
|  
└── pom.xml

我們需要關(guān)心的只有 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") 的含義是該方法接受來(lái)自 /test 的請(qǐng)求，并且提供了對(duì) HTTP 的 GET、POST、DELETE 等方法的支持。

運(yùn)行項(xiàng)目的方法為，在項(xiàng)目根目錄執(zhí)行 mvn spring-boot:run 啟動(dòng)應(yīng)用，打開瀏覽器訪問 http://localhost:8080 即可看到效果：

后端服務(wù)搭建好了，接著實(shí)現(xiàn)前端。為了簡(jiǎn)單，直接創(chuàng)建一個(gè) test.html 文件，添加以下內(nèi)容：

<!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>

使用瀏覽器打開該文件，就會(huì)觸發(fā)一條向 http://localhost:8080 的請(qǐng)求?？梢酝ㄟ^(guò)修改上面代碼的 method，來(lái)觸發(fā)不同類型的請(qǐng)求。

由于是直接使用瀏覽器打開，**網(wǎng)頁(yè)的源為 null**, 當(dāng)向源 http://localhost:8080 請(qǐng)求時(shí)，就變成了跨源請(qǐng)求，因此如果后端不加 CORS 的配置，返回的 HTTP 頭信息中不會(huì)包含 Access-Control-Allow-Origin，因此瀏覽器會(huì)報(bào)出如下錯(cuò)誤：

3. 配置 CORS

一個(gè)應(yīng)用可能會(huì)有多個(gè) CORS 配置，并且可以設(shè)置每個(gè) CORS 配置針對(duì)一個(gè)接口或一系列接口或者對(duì)所有接口生效。

舉例來(lái)說(shuō)，我們需要：

1. 讓 /test 接口支持跨源訪問，而 /test/1 或 /api 等其它接口不支持跨源訪問
2. 讓 /test/* 這一類接口支持跨源訪問，而 /api 等其它接口不支持跨源訪問
3. 站點(diǎn)所有的接口都支持跨源訪問

對(duì)第一種情況，如果想要對(duì)某一接口配置 CORS，可以在方法上添加 CrossOrigin 注解：

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

第二種情況，如果想對(duì)一系列接口添加 CORS 配置，可以在類上添加注解，對(duì)該類聲明所有接口都有效：

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

第三種情況，添加全局配置，則需要添加一個(gè)配置類：

@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);
  }
}

另外，還可以通過(guò)添加 Filter 的方式，配置 CORS 規(guī)則，并手動(dòng)指定對(duì)哪些接口有效。

@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 配置對(duì)所有接口都有效
  FilterRegistrationBean bean = newFilterRegistrationBean(new CorsFilter(source));
  bean.setOrder(0);
  return bean;
}

4. 實(shí)現(xiàn)剖析

無(wú)論是通過(guò)哪種方式配置 CORS，其實(shí)都是在構(gòu)造 CorsConfiguration。

一個(gè) CORS 配置用一個(gè) CorsConfiguration 類來(lái)表示，它的定義如下：

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 中對(duì) CORS 規(guī)則的校驗(yàn)，都是通過(guò)委托給 DefaultCorsProcessor 實(shí)現(xiàn)的。

DefaultCorsProcessor 處理過(guò)程如下：

1. 判斷依據(jù)是 Header 中是否包含 Origin。如果包含則說(shuō)明為 CORS 請(qǐng)求，轉(zhuǎn)到 2；否則，說(shuō)明不是 CORS 請(qǐng)求，不作任何處理。
2. 判斷 response 的 Header 是否已經(jīng)包含 Access-Control-Allow-Origin，如果包含，證明已經(jīng)被處理過(guò)了, 轉(zhuǎn)到 3，否則不再處理。
3. 判斷是否同源，如果是則轉(zhuǎn)交給負(fù)責(zé)該請(qǐng)求的類處理
4. 是否配置了 CORS 規(guī)則，如果沒有配置，且是預(yù)檢請(qǐng)求，則拒絕該請(qǐng)求，如果沒有配置，且不是預(yù)檢請(qǐng)求，則交給負(fù)責(zé)該請(qǐng)求的類處理。如果配置了，則對(duì)該請(qǐng)求進(jìn)行校驗(yàn)。
   

校驗(yàn)就是根據(jù) CorsConfiguration 這個(gè)類的配置進(jìn)行判斷：

1. 判斷 origin 是否合法
2. 判斷 method 是否合法
3. 判斷 header 是否合法
4. 如果全部合法，則在 response header 中添加響應(yīng)的字段，并交給負(fù)責(zé)該請(qǐng)求的類處理，如果不合法，則拒絕該請(qǐng)求。
   

5. 總結(jié)

本文介紹了 CORS 的知識(shí)以及如何在 Spring MVC 中配置 CORS。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論