作者：yizhiwazi
鏈接：https://www.jianshu.com/p/477e7eaa6c2f

序言：跨域資源共享向來都是熱門的需求，使用CORS可以幫助我們快速實現跨域訪問，只需在服務端進行授權即可，無需在前端添加額外設置，比傳統的JSONP跨域更安全和便捷。

一、基本介紹

簡單來說，CORS是一種訪問機制，英文全稱是Cross-Origin Resource Sharing，即我們常說的跨域資源共享，通過在服務器端設置響應頭，把發起跨域的原始域名添加到Access-Control-Allow-Origin 即可。

1. CORS工作原理

CORS實現跨域訪問並不是一蹴而就的，需要藉助瀏覽器的支持，從原理題圖我們可以清楚看到，簡單的請求（通常指GET/POST/HEAD方式，並沒有去增加額外的請求頭信息）直接創建了跨域請求的XHR對象，而複雜的請求則要求先發送一個"預檢"請求，待服務器批准後才能真正發起跨域訪問請求。

根據官方文檔W3C規範的描述，目前CORS使用瞭如下頭部信息：

2. Request Headers（請求頭）

溫馨提示：Request Headers 無需人為干預，因為瀏覽器會自動識別跨域請求並添加對應的請求頭。

• Origin 表示發起跨域請求的原始域。
• Access-Control-Request-Method 表示發起跨域請求的方式，例如GET/POST。
• Access-Control-Request-Headers表示發起跨域請求的額外頭信息。

3. Response headers（響應頭 ）

溫馨提示：Response Headers 需要人為干預，通過設置響應頭以幫助服務器資源進行跨域授權，例如允許哪些原始域進行跨域請求，是否允許響應信息攜帶Cookie等認證信息。

• Access-Control-Allow-Origin 表示允許哪些原始域進行跨域訪問。
• Access-Control-Allow-Credentials表示是否允許客戶端獲取用戶憑據。 使用場景：例如現在需要登錄系統後才能發起跨域請求，並且要附帶Cookie信息給服務器。則必須具備兩個條件：1. 瀏覽器端：
  發送AJAX請求前需設置通信對象XHR的withCredentials 屬性為true。 2.服務器端：設置Access-Control-Allow-Credentials為true。兩個條件缺一不可，否則即使服務器同意發送Cookie，瀏覽器也無法獲取。正確姿勢如下：

$.ajax({
 url: 'localhost:8080',
 xhrFields: {
 withCredentials: true //表示發起跨域訪問並要求攜帶Cookie等認證信息
 },
 success: function (r) {
 console.log(r)
 }
});

有好奇的小夥伴可能會問為什麼在W3C手冊中找不到跨域屬性xhrFields的描述，因為該屬性並不是通信對象XHR的默認屬性，而是自定義屬性。

// Cross domain only allowed if supported through XMLHttpRequest
 if ( support.cors || xhrSupported && !options.crossDomain ) {
 return {
 send: function( headers, complete ) {
 var i,
 xhr = options.xhr();

 xhr.open(
 options.type,
 options.url,
 options.async,
 options.username,
 options.password
 );

 // Apply custom fields if provided
 if ( options.xhrFields ) {
 for ( i in options.xhrFields ) {
 xhr[ i ] = options.xhrFields[ i ];
 } 

 }
 ...
 }

二、CORS實現跨域訪問

• 方式1：返回新的CorsFilter
• 方式2：重寫WebMvcConfigurer
• 方式3：使用註解（@CrossOrigin）
• 方式4：手工設置響應頭（HttpServletResponse ）

注：CorsFilter / WebMvcConfigurer / @CrossOrigin 需要SpringMVC 4.2 以上的版本才支持，對應SpringBoot 1.3 版本以上都支持這些CORS特性。不過，使用SpringMVC4.2 以下版本的小夥伴也不用慌，直接使用方式4通過手工添加響應頭來授權CORS跨域訪問也是可以的。附：在SpringBoot 1.2.8 + SpringMVC 4.1.9 親測成功。

注：方式1和方式2屬於全局CORS配置，方式3和方式4屬於局部CORS配置。如果使用了局部跨域是會覆蓋全局跨域的規則，所以可以通過@CrossOrigin註解來進行細粒度更高的跨域資源控制。

1. 返回新的CorsFilter（全局跨域）

在任意配置類，返回一個新的CorsFilter Bean，並添加映射路徑和具體的CORS配置信息。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {
 @Bean
 public CorsFilter corsFilter() {
 //1.添加CORS配置信息
 CorsConfiguration config = new CorsConfiguration();
 //放行哪些原始域
 config.addAllowedOrigin("*");
 //是否發送Cookie信息
 config.setAllowCredentials(true);
 //放行哪些原始域(請求方式)
 config.addAllowedMethod("*");
 //放行哪些原始域(頭部信息)
 config.addAllowedHeader("*");
 //暴露哪些頭部信息（因為跨域訪問默認不能獲取全部頭部信息）
 config.addExposedHeader("*");

 //2.添加映射路徑
 UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
 configSource.registerCorsConfiguration("/**", config);

 //3.返回新的CorsFilter.
 return new CorsFilter(configSource);
 }
}

2. 重寫WebMvcConfigurer（全局跨域）

在任意配置類，返回一個新的WebMvcConfigurer Bean，並重寫其提供的跨域請求處理的接口，目的是添加映射路徑和具體的CORS配置信息。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {
 @Bean
 public WebMvcConfigurer corsConfigurer() {
 return new WebMvcConfigurer() {
 @Override
 //重寫父類提供的跨域請求處理的接口
 public void addCorsMappings(CorsRegistry registry) {
 //添加映射路徑
 registry.addMapping("/**")
 //放行哪些原始域
 .allowedOrigins("*")
 //是否發送Cookie信息
 .allowCredentials(true)
 //放行哪些原始域(請求方式)
 .allowedMethods("GET","POST", "PUT", "DELETE")
 //放行哪些原始域(頭部信息)
 .allowedHeaders("*")
 //暴露哪些頭部信息（因為跨域訪問默認不能獲取全部頭部信息）
 .exposedHeaders("Header1", "Header2");
 }
 };
 }
}

3. 使用註解（局部跨域）

在方法上（@RequestMapping）使用註解 @CrossOrigin ：

 @RequestMapping("/hello")
 @ResponseBody
 @CrossOrigin("http://localhost:8080") 
 public String index( ){
 return "Hello World"; 

 }

或者在控制器（@Controller）上使用註解 @CrossOrigin ：

@Controller
@CrossOrigin(origins = "http://xx-domain.com", maxAge = 3600)
public class AccountController {

 @RequestMapping("/hello")
 @ResponseBody
 public String index( ){
 return "Hello World";
 }
}

4. 手工設置響應頭（局部跨域 ）

使用HttpServletResponse對象添加響應頭（Access-Control-Allow-Origin）來授權原始域，這裡Origin的值也可以設置為"*" ，表示全部放行。

 @RequestMapping("/hello")
 @ResponseBody
 public String index(HttpServletResponse response){
 response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
 return "Hello World";
 }

三、測試跨域訪問

首先使用快速構建一個Maven工程，什麼都不用改，在static目錄下，添加一個頁面：index.html 來模擬跨域訪問。

  Page Index
前臺系統



 

然後創建另一個工程，在Root Package添加Config目錄並創建配置類來開啟全局CORS。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {

 @Bean
 public WebMvcConfigurer corsConfigurer() {
 return new WebMvcConfigurer() {
 @Override
 public void addCorsMappings(CorsRegistry registry) {
 registry.addMapping("/**");
 }
 };
 }
}

接著，簡單編寫一個Rest接口 ，並指定應用端口為8090。

package com.hehe.yyweb;

@SpringBootApplication
@RestController
public class YyWebApplication {

 @Bean
 public TomcatServletWebServerFactory tomcat() {
 TomcatServletWebServerFactory tomcatFactory = new TomcatServletWebServerFactory();
 tomcatFactory.setPort(8090); //默認啟動8090端口
 return tomcatFactory;
 }

 @RequestMapping("/hello")
 public String index() {
 return "Hello World";
 }

 public static void main(String[] args) {
 SpringApplication.run(YyWebApplication.class, args);
 }
}